CSS盒模型由内容区、内边距、边框和外边距组成，总尺寸受box-sizing影响；采用border-box可使width包含padding和border，便于布局控制。
CSS盒模型是网页布局的核心概念之一，它决定了每个HTML元素在页面中占据的空间。每一个元素都被视为一个矩形盒子，这个盒子由四个部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型的结构和计算方式，对精准控制页面布局至关重要。
内容区（Content）
内容区是盒子中最内部的部分，用于显示文本、图片或其他内容。width 和 height 属性定义的就是内容区的尺寸。默认情况下，设置一个div的width为200px，指的是内容区域的宽度为200px，不包括padding、border和margin。
例如：
div {
width: 200px;
height: 100px;
}
此时内容区大小就是200×100像素。
内边距（Padding）
内边距是内容区与边框之间的空间，用于增加内容与边框的距离。padding会增加元素整体的占用空间。它可以分别设置上、右、下、左，也可以统一设置。
立即学习“前端免费学习笔记（深入）”；
常见写法：- padding: 10px; —— 四个方向都是10px
- padding: 10px 20px; —— 上下10px，左右20px
- padding: 10px 20px 15px 5px; —— 顺时针设置：上、右、下、左
注意：padding属于盒子内部，背景色会延伸到padding区域。
边框（Border）
边框围绕在padding的外围，是元素的边界线条。border由三个属性组成：宽度（width）、样式（style）和颜色（color）。
示例：border: 2px solid #000;
这条规则设置了2像素宽的黑色实线边框。border也会增加元素的整体尺寸，并且会影响布局空间。
外边距（Margin）
外边距是盒子与其他元素之间的距离，位于border外部。margin用于控制元素之间的间隔，可以设为正值（推开）、负值（拉近）或auto（居中等特殊用途）。
- margin: 0 auto; —— 水平居中块级元素（需配合width）
- margin-bottom: 20px; —— 控制元素下方间距
注意：margin在垂直方向可能发生“外边距合并”现象，即相邻两个块级元素的上下margin会取较大值而不是相加。
盒模型的两种计算方式
CSS中有两种盒模型：标准盒模型 和 IE盒模型。
- 标准盒模型（content-box）：width和height只包含内容区，总宽度 = width + padding + border + margin
- IE盒模型（border-box）：width和height包含内容、padding和border，更直观易控
* {
box-sizing: border-box;
}
这样设置后，无论怎么添加padding或border，元素的width和height都不会超出设定值。
实际应用建议
在日常开发中，建议统一设置 box-sizing: border-box，避免因padding或border导致布局错乱。结合合理的padding和margin，可以让页面更具可读性和美观性。
比如制作一个按钮：
.btn {
width: 120px;
height: 40px;
padding: 10px 20px;
border: 2px solid #007bff;
border-radius: 4px;
margin: 10px;
box-sizing: border-box;
}
即使加上内边距和边框，按钮的实际宽高依然可控。
基本上就这些，掌握盒模型的结构和计算逻辑，就能更自如地进行页面布局设计。
