CSS 盒模型
所有 HTML 元素都可以被视为盒子。
CSS 盒模型
在 CSS 中，术语“盒模型”用于讨论设计和布局。
CSS 盒模型本质上是一个包裹在每个 HTML 元素周围的盒子。它包含：内容、内边距、边框和外边距。下图展示了盒模型
不同部分的解释
- 内容 - 盒子的内容，文本和图片显示在这里
- 内边距 - 在内容周围清除一个区域。内边距是透明的
- 边框 - 一个围绕内边距和内容的边框
- 外边距 - 在边框外部清除一个区域。外边距是透明的
盒模型允许我们添加元素周围的边框，以及定义元素之间的间距。
元素的宽度和高度
为了在所有浏览器中正确设置元素的宽度和高度，你需要了解盒模型的工作原理。
重要提示： 当你使用 CSS 设置元素的 width 和 height 属性时，你只是设置了内容区域的宽度和高度。要计算元素的总宽度和高度，你必须还要包括内边距和边框。
示例
这个 <div> 元素的总宽度将是 350px，总高度将是 80px：
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
尝试一下 »
以下是计算方法
元素的总宽度应该这样计算
元素总宽度 = 宽度 + 左边内边距 + 右边内边距 + 左边边框 + 右边边框
元素的总高度应该这样计算
元素总高度 = 高度 + 上边内边距 + 下边内边距 + 上边边框 + 下边边框
注意： 外边距属性也会影响盒子在页面上占用的总空间，但外边距不包含在盒子的实际大小中。盒子的总宽度和高度在边框处停止。
