盒子模型四层依次对应CSS的content（width/height）、padding、border、margin属性，其中box-sizing决定width是否包含内边距和边框。
盒子模型的四个层级怎么对应到 CSS 属性
html 里没有叫“盒子”的标签，所谓盒子模型（box model）是浏览器渲染时对每个元素自动套上的计算框架。它由四层嵌套组成：content → padding → border → margin，每一层都影响元素最终占位和间距。
常见错误是以为写个 div 就天然有“盒子感”，结果发现加了 padding 后内容溢出、或 width: 200px 实际撑开成 220px——这是因为默认用的是 box-sizing: content-box，width 只管 content 区域。
- 想让
width控制整个盒子总宽（含padding和border），必须显式写box-sizing: border-box -
margin不参与盒尺寸计算，但会触发外边距合并（margin collapse），比如两个相邻p的上下margin: 16px不会叠加成 32px，而是取较大值 -
border设为none或0效果不同：border: 0仍保留 border 层（只是不可见），border: none才彻底移除该层
flex 布局中盒子为啥不按 width 生效
在 display: flex 容器里，子项默认变成 flex-item，此时 width 不再是绝对控制项，而是受 flex 三属性联合约束：flex-grow、flex-shrink、flex-basis。
典型现象：给子项设 width: 200px，但实际被拉宽或压缩；或者设了 flex: 1 后，width 完全失效。
-
flex-basis才是替代width/height的初始尺寸依据，比如flex: 1 1 200px中的200px就是它 - 单独写
flex: 1等价于flex: 1 1 0，意味着“从 0 开始拉伸”，此时width被忽略 - 如果真要锁定宽度，优先用
flex: 0 0 200px（不增长、不缩小、基准 200px），比单纯设width更可靠
inline 元素的盒子为什么 padding/margin 不生效
span、a、strong 这类 display: inline 元素，其 padding 和 margin 在垂直方向（top/bottom）视觉上“好像没用”——其实用了，只是不推挤其他行内元素，也不影响行高计算。
立即学习“前端免费学习笔记（深入）”；
错误理解是“inline 元素不能设 padding”，其实可以，但效果受限：左右 padding 正常起作用，上下则只增加背景/边框区域，不改变行框（line box）高度。
- 要让上下
padding推动布局，得先改成display: inline-block或display: inline-flex -
margin-top/margin-bottom对 inline 元素完全无效（浏览器忽略），只有margin-left/margin-right有效 - 千万别靠给 inline 元素设
line-height来“模拟”上下间距，那是错位解法，容易引发基线对齐混乱
margin auto 在什么情况下能居中
margin: 0 auto 能居中，前提是元素满足两个硬条件：块级（display: block 或类似） + 有明确宽度（width 不为 auto）。缺一不可。
常见失败场景：给 flex 子项写 margin: 0 auto 没反应，或给 position: absolute 元素写也无效——因为它们脱离了常规文档流，auto margin 失去计算依据。
- 在 flex 容器中居中，应该用
justify-content（主轴）或align-items（交叉轴），不是margin - 绝对定位元素想水平居中，得配合
left: 50%+transform: translateX(-50%)，margin: 0 auto不起作用 -
margin: auto在 Grid 布局中可用于单个轨道内居中，但需容器设place-items: center或显式定义轨道大小
盒子模型不是画出来的，是浏览器算出来的。每次调样式前，先确认当前元素的 display 值、是否在 flex/grid 容器里、box-sizing 是什么——这三个点漏掉任何一个，后面调半天 padding 都是白忙。
