CSS 盒子模型
所有 HTML 元素都可以看作是盒子。
CSS 盒子模型
在 CSS 中，当我们谈论设计和布局时，会使用“盒子模型”这个术语。
CSS 盒子模型本质上是一个包裹着每个 HTML 元素的盒子。它包含：内容、内边距（padding）、边框（border）和外边距（margin）。下图说明了盒子模型
各部分解释
- 内容 - 盒子的内容，文本和图像显示在此处
- 内边距 (Padding) - 在内容周围创建区域。内边距是透明的
- 边框 (Border) - 围绕内边距和内容的边框
- 外边距 (Margin) - 在边框外部创建区域。外边距是透明的
盒子模型允许我们为元素添加边框，并定义元素之间的空间。
元素的宽度和高度
为了在所有浏览器中正确设置元素的宽度和高度，您需要了解盒子模型的工作原理。
重要提示： 当您使用 CSS 设置元素的宽度和高度属性时，您只是设置了内容区域的宽度和高度。要计算元素的总宽度和高度，您还必须包括内边距和边框。
示例
这个 <div> 元素将具有 350px 的总宽度和 80px 的总高度：
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
自己动手试一试 »
计算如下
元素的总宽度应如下计算
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框
元素的总高度应如下计算
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框
注意： 外边距属性也影响盒子在页面上占用的总空间，但外边距不包含在盒子的实际尺寸中。盒子的总宽度和高度在边框处停止。
