盒模型由content、padding、border、margin四层构成，width仅指内容宽；默认content-box下总宽=width+padding×2+border×2，border-box可使width包含padding和border。
盒模型是CSS布局的底层逻辑，理解它等于掌握了网页元素怎么占位置、怎么留空、怎么贴边。别被“模型”二字吓住——它其实就是每个HTML元素自带的一个“透明信封”，由四层组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。用 width、padding、border、margin 四个属性就能一层层拆开看清楚。
width 只管“内容区”的宽，不是整个盒子的宽
很多人以为设置 width: 200px，这个元素就占200像素宽——其实只对了三分之一。这个200px仅指内容区域（比如文字或图片所在的那块）的宽度。一旦加了 padding 或 border，实际占用空间就会变大。
- 默认盒模型（
box-sizing: content-box）下：总宽度 = width + 左右 padding + 左右 border - 比如：
width: 200px; padding: 10px; border: 3px solid #000;→ 实际占宽 = 200 + 20 + 6 = 226px - 想让 width 包含 padding 和 border？直接写
box-sizing: border-box;，这是现代开发的通用写法
padding 是内容和边框之间的“呼吸区”
padding 在内容和 border 之间撑开空白，它属于盒子内部，背景色和边框都会延伸覆盖 padding 区域（这点和 margin 完全不同）。
- 可以单独设方向：
padding-top、padding-left等，也可以简写：padding: 10px 15px 8px 12px（上右下左） - padding 不能为负值；设为 0 时，内容会紧贴 border
- 注意：行内元素（如
）的上下 padding 虽然生效，但不会影响行高或周围布局——这是新手常踩的坑
border 是盒子的“轮廓线”，有宽、样式、颜色三要素
border 不只是画条线，它实实在在占据空间，且会影响元素尺寸和位置。
立即学习“前端免费学习笔记（深入）”；
- 完整写法：
border: 2px dashed #666（宽度、样式、颜色缺一不可） - 可以分方向控制：
border-bottom: 1px solid #eee，适合做分割线 - 圆角靠
border-radius，它是 border 的“修饰属性”，不影响盒模型计算，但会让视觉边界变软
margin 是盒子之间的“安全距离”，用于控制兄弟/父子元素间距
margin 在 border 外侧，是完全透明的，不继承背景、不响应鼠标事件，纯粹用来推远其他元素。
- 支持负值（可用来微调重叠或反向拉动）
- 相邻垂直 margin 会合并（collapse）：两个块级元素上下 margin 都是 20px，实际间距只有 20px，不是 40px
- 父容器没有 border/padding 时，子元素的 top/bottom margin 可能“穿出”父容器（叫 margin 穿透），加个
overflow: hidden或border: 1px solid transparent就能挡住
把 width、padding、border、margin 拆开练几次，再用浏览器开发者工具（右键 → 检查 → 查看右侧 box model 图标），一边改一边看数字变化，两三次就建立直觉了。不复杂但容易忽略细节。
