块级模型介绍

1.1 块级模型基础

块级模型是理解网页中元素如何排列和交互的基础。它定义了HTML元素的结构和大小，以及它们如何被内边距、边框和外边距所包围。

块级模型基础

CSS块级模型描述了HTML元素块的组成。每个元素由四个基本组件构成：

• 内容 (content)。
• 内边距 (padding)。
• 边框 (border)。
• 外边距 (margin)。

这些组件决定了元素如何显示，以及如何与页面上的其他元素交互。

内容 (Content)

内容 (content) 是元素的主体部分，其中包含文本、图像或其他嵌套元素。内容的尺寸可以通过 width 和 height 属性显式设置，或者由元素的内容决定。

使用示例

在这个示例中，元素 .content 的内容包含文本 "这是元素的内容。"：

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        这是元素的内容。
      </div>
    
  

1.2 块级模型的可视化

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

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

块级模型的可视化:

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

1.3 边框 (Border)

边框 (border) 环绕着元素的内容和内边距。边框可以有不同的样式、厚度和颜色。边框可以用来在页面上视觉上突出显示元素。

使用示例

在这个示例中，元素 .border 应用了5像素厚、黑色虚线的边框，环绕着内容和内边距。

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        这是有边框的元素。
      </div>