CSS盒模型由内容、内边距、边框和外边距组成，width/height默认仅指内容区域大小；padding影响背景延伸，border占用空间，margin透明且可能合并；使用box-sizing: border-box可使宽高包含padding和border，便于布局控制。
CSS盒模型是网页布局的基础概念，理解它能帮助你更准确地控制元素的尺寸和位置。每个HTML元素都可以看作是一个矩形盒子，这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
内容区域（Content）
这是盒子最核心的部分，用来显示文本、图片等内容。width 和 height 属性定义的就是内容区域的大小。注意，这里设置的宽高不包括padding、border和margin。
内边距（Padding）
padding是内容与边框之间的空间，背景颜色会延伸到padding区域。它可以分别设置上、右、下、左四个方向，也可以统一设置。比如：
- padding: 10px; —— 四个方向都是10像素
- padding: 5px 10px; —— 上下5px，左右10px
边框（Border）
border围绕在padding的外围，是盒子的边界。它有三个属性：宽度（width）、样式（style）和颜色（color）。例如：
border: 2px solid #000;这条边框会占用额外的空间，影响整体尺寸。
外边距（Margin）
margin是盒子与其他元素之间的距离，它是透明的，不会遮挡背景。margin可以用来控制元素之间的间隔，还可能出现“外边距合并”现象——相邻垂直方向的margin会取较大值而不是相加。
默认情况下，CSS使用的是标准盒模型，即你设置的width/height只包含content，加上padding和border后总尺寸会变大。如果想让width包含padding和border，可以使用：
box-sizing: border-box;这样设置后，元素
的width就是content + padding + border的总和，更便于布局控制。
基本上就这些。掌握盒模型的关键是明白每个部分如何影响元素的实际占位，以及如何通过box-sizing来切换计算方式。不复杂但容易忽略细节。
