box-sizing: border-box 并未失效，它仅让width/height包含padding和border，避免总尺寸额外膨胀；但padding仍占空间、影响子元素布局、不控制margin、不干预flex分配、不改变百分比padding计算基准，伪元素需单独设置才生效。
box-sizing: border-box 为什么没“封住” padding？
它确实封住了——但只封住你设的 width 和 height 计算逻辑。padding 依然存在、依然占空间、依然影响子元素和背景，只是不再让总宽高“额外膨胀”。很多人误以为它能消除 padding 的所有布局影响，其实不是。
哪些地方 padding 还是会“撑开”布局？
常见误判点，不是 box-sizing 失效，而是你没意识到它不负责这些事：
- 子元素设了
width: 100%，父元素有padding且没设box-sizing: border-box→ 子元素按父元素的content width计算，结果溢出（此时问题在父元素，不是子元素） - Flex 子项同时写了
width: 200px和flex: 1→ 尺寸冲突，box-sizing不干预 flex 的主轴分配逻辑 -
padding-top: 20%→ 百分比始终按父元素width计算，和父height无关，box-sizing对此无影响 - 文本换行或空格导致视觉“撑出” → 实际是
white-space、font-size或行高引起，不是尺寸问题
怎么快速确认是不是 box-sizing 没生效？
打开 Chrome 或 Firefox 开发者工具，选中元素，在 “Computed” 面板里搜 box-sizing，看值是 content-box 还是 border-box；再看 “Layout” 标签页右上角的小图标，它会直观显示当前盒模型类型和各区域尺寸。
如果 box-sizing 是 content-box，且 “Layout Width” 明显大于 “Width” 值，基本就是它了。勾选 “Show padding area”，能立刻看到 padding 是否挤压了内容或重叠了兄弟元素。
全局设置 * { box-sizing: border-box } 为什么还要加 *::before, *::after？
因为伪元素默认仍是 content-box，它们带 padding 时照样撑开。局部改某个类，容易漏掉第三方组件或动态插入的节点。必须连同 *::before 和 *::after 一起写，否则伪元素不受控。
现代项目可忽略 IE8 以下兼容，不用加 -moz- 或 -webkit- 前缀。如果项目已上线，先在局部容器（如 .app）上测试，再逐步推广。
真正容易被忽略的是：margin 始终不参与盒模型计算，它永远是“外部”的；而 background-position 的参考原点始终是 content box 左上角，哪怕用了 border-box —— 这跟 padding 是否显示背景无关，那是 background-clip 控制的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
