CSS盒模型中margin、border、padding、width、height并列生效，无加载优先级；实际渲染由box-sizing（决定width/height计算范围）、margin合并规则（垂直方向取较大值）及background绘制边界共同决定。
margin、border、padding、width、height这些属性是**并列生效的样式声明**，它们之间不按顺序加载或覆盖，而是共同参与盒子尺寸计算。真正影响最终渲染结果的是**CSS层叠规则和盒模型类型（box-sizing）**。
别被“优先级”这个词带偏了：这里不是选择器优先级问题，而是计算逻辑问题。
box-sizing 决定 width/height 算什么
这是最容易出错的地方。同一个 width: 200px，在不同 box-sizing 下含义完全不同：
-
box-sizing: content-box（默认）：width只指内容区宽度，加上padding和border后盒子实际更宽 -
box-sizing: border-box：width指整个盒子总宽（含padding+border），内容区会自动压缩
比如：width: 100px; padding: 10px; border: 5px solid;，在 content-box 下盒子总宽是 130px，在 border-box 下就是严格 100px。
margin 不参与盒子尺寸计算，但影响布局位置
margin 不会撑大盒子自身，但它决定盒子与其他元素的间距，且存在合并（collapsing）行为：
立即学习“前端免费学习笔记（深入）”；
- 相邻块级元素的垂直
margin会取较大值，而非相加 - 父容器与第一个/最后一个子元素的垂直
margin可能溢出到父容器外（导致“塌陷”） -
margin的负值允许重叠，常用于微调或取消间隙
它不跟 padding 或 border “比优先级”，只是作用阶段不同：padding/border 影响盒子内部结构，margin 影响盒子外部关系。
padding 和 border 的顺序无关，但会影响视觉层级
padding 在内容和 border 之间，border 在 padding 和 margin 之间，这是结构决定的，不是 CSS 声明顺序决定的：
- 无论你先写
border还是先写padding，渲染顺序固定为：内容 →padding→border→margin - 但如果你用
background-color，它只铺满到padding边缘（不含border），除非显式设background-clip -
border的transparent或none不会阻止padding生效，反之亦然
真正要盯住的，不是哪个属性“优先”，而是你用的是哪种盒模型、是否理解 margin 合并、以及 background 和 border 的绘制边界在哪里。这三个点踩错一个，布局就容易“看起来不对劲”。
