CSS Box 模型

---

CSS 盒子模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语"盒模型"或"框模型"。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。下图展示了框模型:

对不同部分的说明:

• Content - 框的内容，其中显示文本和图像。
• Padding - 清除内容周围的区域。内边距是透明的。
• Border - 围绕内边距和内容的边框。
• Margin - 清除边界外的区域。外边距是透明的。

框模型允许我们在元素周围添加边框，并定义元素之间的空间。

实例

盒子模型的演示:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
} 亲自试一试 »

---

---

元素的宽度和高度

为了在所有浏览器中正确设置元素的宽度和高度，您需要了解框模型如何工作。

重要事项: 使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

实例

<div> 元素的总宽度将是 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
} 亲自试一试 »

计算如下:

320px(宽度) + 20px（左+右内边距） + 10px（左+右边框） + 0px（左+右外边距） = 350px

元素的总宽度应该这样计算:

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算:

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

---

CSS 习题和测验

测验 1 » 测验 2 » 测验 3 » 测验 4 »

---