CSS 盒模型

盒模型是 CSS 中很重要的一个概念，每个 HTML 元素都可以看作一个盒子，盒子空间由四个区域组成：内容区、内边距、边框、外边距。盒模型让我们很容易设置内容与边框之间的空白，以及相邻元素之间的空白。

不同部分的解释：

• 内容区 - 一般是文本、图像等
• 内边距 - 边框和内容区的空白区域
• 边框 - 就是我们平常所说的边框
• 外边距 - 边框以外的空白区域

盒模型演示：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

元素的宽度和高度

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

在标准盒模型中，使用 CSS 设置的宽度和高度是设置元素的内容区域的宽度和高度。而元素的完整的大小，还要累加外边距、内边距和边框的宽度。

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

元素总高度 = 内容高度 + 上内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

这个 <div> 元素的总宽度为 350px：

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

计算 <div> 元素的总宽度

320px (内容区宽度 width)
+ 20px (左内边距 + 右内边距)
+ 10px (左边框宽 + 右边框宽)
+ 0px  (左外边距 + 右外边距)
= 350px

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

元素总高度 = (内容区域)高度 + 上内边距 + 下内边距 + 上边框高 + 下边框高 + 上外边距 + 下外边距

如有需要，查看关于内边距和外边距的更多信息。