前端必知必会-CSS盒子模型

---

CSS 盒子模型

所有 HTML 元素都可以视为盒子。

在 CSS 中，术语“盒子模型”用于讨论设计和布局。

CSS 盒子模型本质上是一个包裹每个 HTML 元素的盒子。它由以下部分组成：内容、填充、边框和边距。下图说明了盒子模型：

不同部分的说明：

内容content - 盒子的内容，文本和图像出现的位置
填充padding - 清除内容周围的区域。填充是透明的
边框border - 围绕填充和内容的边框
边距margin - 清除边框外的区域。边距是透明的
盒子模型允许我们在元素周围添加边框，并定义元素之间的空间。

示例
盒子模型的演示：

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

元素的宽度和高度

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

重要提示：使用 CSS 设置元素的宽度和高度属性时，只需设置内容区域的宽度和高度。要计算元素的总宽度和高度，还必须包括填充和边框。

示例
此 <div> 元素的总宽度为 350px，总高度为 80px：

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

计算如下：
320px（内容区域宽度）

• 20px（左填充 + 右填充）
• 10px（左边框 + 右边框）
  = 350px（总宽度）

50px（内容区域高度）

• 20px（顶部填充 + 底部填充）
• 10px（顶部边框 + 底部边框）
  = 80px（总高度）
  元素的总宽度应按以下方式计算：

元素总宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框

元素的总高度应按以下方式计算：

元素总高度 = 高度 + 顶部填充 + 底部填充 + 顶部边框 + 底部边框

注意：边距属性也会影响框在页面上占用的总空间，但边距不包含在框的实际大小中。框的总宽度和高度在边框处停止。

---

总结

本文介绍了的CSS盒子模型使用，如有问题欢迎私信和评论