CSS盒模型由width、height、padding、border和margin组成，决定元素的尺寸与布局。width和height设置内容区域大小，默认不包括padding和border；padding增加内容与边框间的空间，影响总尺寸；border为元素添加边框线，需定义样式才可见；margin控制元素外边距，可设负值且相邻块级元素垂直margin会合并；box-sizing属性改变尺寸计算方式，推荐使用border-box，使width和height包含padding和border，便于精确控制布局。综合运用这些属性可实现整齐、可控的页面结构。
在网页布局中，CSS盒模型是构建页面结构的基础。每一个HTML元素都可以看作是一个矩形的盒子，这个盒子由 width（宽度）、height（高度）、padding（内边距）、border（边框）和 margin（外边距）五部分组成。理解这些属性如何相互作用，对精准控制页面布局至关重要。
width 与 height：内容区域的尺寸
width 和 height 定义的是盒子中“内容区域”的大小，不包括 padding、border 和 margin。默认情况下，块级元素会占据父容器的全部宽度，而高度则由内容决定。
可以设置固定值（如 px、em），也可以使用百分比或 auto。例如：
.box {
width: 200px;
height: 100px;
}
注意：当添加 padding 或 border 后，元素实际占用的空间会大于设定的 width/height，除非使用 box-sizing: border-box 来改变计算方式。
立即学习“前端免费学习笔记（深入）”；
padding：内容与边框之间的空间
padding 是内容到边框的距离，它让内容不至于紧贴边框，提升可读性和美观性。padding 可以分别设置四个方向，也可以统一设置。
常见写法：
- padding: 10px; —— 四个方向都是10px
- padding: 10px 20px; —— 上下10px，左右20px
- padding: 10px 20px 15px 5px; —— 顺时针：上右下左
padding 会影响盒子总尺寸。例如，一个 width: 200px 的元素，加上左右各10px的 padding，其内容宽度不变，但内部可用空间减少，整体视觉宽度增加（若 box-sizing 为 content-box）。
border：盒子的边界线
border 是围绕 padding 和内容的边框，由三个属性组成：宽度（width）、样式（style）和颜色（color）。必须设置样式（如 solid、dashed）才会显示。
示例：
.box {
border: 2px solid #333;
}
也可单独设置某一边：
- border-top: 1px dashed red;
- border-radius 还可让边框变圆角，增强视觉效果。
border 会增加盒子的实际尺寸，尤其是在 box-sizing: content-box 模式下需要特别注意。
margin：盒子与其他元素之间的距离
margin 控制元素外部的空间，用于控制元素间的间隔。margin 支持负值，可用于微调布局或实现重叠效果。
写法类似 padding：
.box {
margin: 20px auto; /* 上下20px，水平居中 */
}
块级元素的上下 margin 会发生“合并”现象（margin collapse），即两个相邻块的垂直 margin 会取较大者，而不是相加。这一点在排版时需特别留意。
box-sizing：控制盒模型计算方式
默认的 box-sizing: content-box 会让 width/height 仅表示内容区域，导致添加 padding 和 border 后盒子变大。推荐使用：
* {
box-sizing: border-box;
}
这样设置后，width 和 height 包含了 content、padding 和 border，更符合直觉，便于精确布局。
综合应用示例：创建一个卡片组件
.card {
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
margin: 10px;
background-color: #f9f9f9;
box-sizing: border-box;
}
在这个例子中，整个卡片的宽度就是 300px（包含 padding 和 border），上下 margin 为 10px，与其他元素保持间距，视觉整齐。
基本上就这些。掌握 width、height、padding、border、margin 和 box-sizing 的配合使用，就能灵活控制页面中每个元素的位置和尺寸，为复杂布局打下坚实基础。
