面试题：标准盒模型与 IE 盒模型？box-sizing 怎么用？

标准盒模型（content-box，默认）

width/height 只算 content；padding、border 额外往外长 → 设 width:100% 再加 padding 易撑破父级。

IE 盒模型（border-box）

width/height 包含 content + padding + border，更符合「这个框总宽就是 100px」的直觉。

推荐

全局：

*, *::before, *::after { box-sizing: border-box; }

布局更稳定，面试常答：border-box 减少宽度计算心智负担。

margin

不参与 width 计算；垂直 margin 可能折叠（相邻块级兄弟、父子等场景）。