课程
开始
开始学习
CodeGym /Java 课程 /Frontend SELF ZH /HTML块级模型

HTML块级模型

Frontend SELF ZH
第 7 级 , 课程 4
可用

9.1 块级元素

HTML块级模型 是描述文档中HTML元素结构和显示的概念。它帮助开发者了解元素如何相互作用，以及它们如何在页面上排布。理解块级模型对于创建结构化和美观的网页非常重要。

HTML块级模型由两种主要类型的元素构成：块级和行内。这些元素在网页布局中起着关键作用。

块级元素

HTML 标签 描述
<div> 用于分组其他元素的主要容器。
<p> 文本段落。
<h1> – <h6> 不同级别的标题。
<ul>, <ol> 无序和有序列表。
<li> 列表项。
<section> 文档的语义部分容器。
<article> 独立的内容块。
<aside> 与主要内容相关的内容（侧边栏）。
<header> 页面或部分的引导或导航部分。
<footer> 页面或部分的底部。
<nav> 导航链接。
<main> 文档的主要内容。

块级元素示例：

HTML
    
      <div>
        <h1>标题</h1>
        <p>这是一个包含在div块级元素中的文本段落。</p>
      </div>

9.2 行内元素

行内元素 (inline-level elements) 只占用其内容所需的宽度，并且不会另起一行。它们只能包含行内元素或文本。 行内元素示例：

HTML 标签 描述
<span> 用于分组行内内容的主要容器。
<a> 超链接。
<strong>, <b> 文本强调（粗体）。
<em>, <i> 文本强调（斜体）。
<img> 插入图片。
<code> 代码块。
<label> 标签和表单元素的关联。
<input>, <select>, <textarea> 表单元素。

行内元素示例：

HTML
    
      <span>这是一个包含<strong>粗体文本</strong>和<em>斜体</em>的段落。</span>

9.3 块级模型的组成部分

块级模型的组成部分

块级模型中的每个元素可以表示为一个矩形块，由以下部分组成：

  • 内容 (Content): 元素的内部内容，如文本或图片
  • 内边距 (Padding): 内容与元素边框之间的空间
  • 边框 (Border): 围绕内容和内边距的线条
  • 外边距 (Margin): 元素边框与相邻元素之间的空间

块级模型的可视化：

CSS
    
      .element {
        width: 200px;           /* 内容宽度 */
        padding: 10px;          /* 内边距 */
        border: 2px solid red;  /* 边框 */
        margin: 20px;           /* 外边距 */
      }

块级模型的HTML示例：

在这个示例中，类为 "box" 的 <div> 元素具有200px的宽度，10px的内边距，2px的边框，和20px的外边距。这些属性定义了元素在页面上的显示方式及与其他元素的交互。

CSS
    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
HTML
    
      <div class="box">
        这是块级模型的示例。
      </div>
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION