手册
目录
收藏420
分享
阅读3931
更新时间2025-07-16
前言：
所有 HTML 元素都可以看作是盒子。
在 CSS 中，"盒子模型" 这个术语通常在讨论设计和布局时使用。
CSS 盒子模型本质上是一个围绕每个 HTML 元素的盒子。它由以下部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。下图展示了盒子模型的结构：
不同部分的解释如下：
盒子模型让我们可以在元素周围添加边框，并定义元素之间的空间。
盒子模型的演示：
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
为了在所有浏览器中正确设置元素的宽度和高度，你需要了解盒子模型的工作原理。
重要提示： 当你使用 CSS 设置一个元素的 width 和 height 属性时，你实际上设置的是内容区域的宽高。要计算元素的总宽度和高度，你还必须将内边距和边框考虑进去。
这个 <div> 元素的总宽度将是 350px，总高度为 80px：
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
计算过程如下：
320px（内容区域的宽度）
+ 20px（左边距 + 右边距）
+ 10px（左边框 + 右边框）
= 350px（总宽度）
50px（内容区域的高度）
+ 20px（上内边距 + 下内边距）
+ 10px（上边框 + 下边框）
= 80px（总高度）
元素的总宽度应按如下方式计算：
总宽度 = width + 左内边距 + 右内边距 + 左边框 + 右边框
元素的总高度应按如下方式计算：
总高度 = height + 上内边距 + 下内边距 + 上边框 + 下边框
注意： margin 属性也会影响盒子在页面中占据的总空间，但它不包含在盒子的实际尺寸中。盒子的总宽度和总高度只计算到边框为止。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.3万人学习
共89课时
126.3万人学习
