box-sizing: border-box没生效主因是未全覆盖、位置不当或被覆盖；必须写, ::before, *::after并置于css最顶部，同时确保doctype声明和ie8前缀（-ms-box-sizing）正确。
box-sizing: border-box 没生效，90% 是因为没写全、没放对位置，或被更高优先级样式覆盖 —— 它不是“开了就自动管所有元素”的开关。
为什么写了 * { box-sizing: border-box } 还是无效
只写 * 会漏掉伪元素，而它们默认仍是 content-box。比如用 ::after 清浮动、加装饰边框、渲染图标时，只要它带 padding 或 border，就会悄悄撑开容器，导致布局偏移或溢出。
- 必须显式包含
*::before和*::after，缺一不可 - 规则必须放在所有 CSS 文件最顶部（
中最早加载的位置），否则会被 Normalize.css、Bootstrap、Ant Design 等第三方样式覆盖 - 某些老框架（如 Bootstrap 4）的重置规则里只写了
*，没覆盖伪元素，你得手动补上 - 检查方式：在 DevTools 中选中一个伪元素（比如
.card::before），看「Computed」面板里box-sizing的值是否为border-box且未被划掉
为什么 Computed 面板里显示 content-box
即使你写了全局规则，也可能被其他声明覆盖。常见覆盖源包括：
- 第三方组件库用
!important强制设了box-sizing: content-box（如旧版 Element UI 的.el-input） - CSS-in-JS 库（如 styled-components）服务端渲染顺序错乱，首屏没注入该规则
- 局部样式权重更高，比如
.form-control { box-sizing: content-box !important; } - IE8 需要
-ms-box-sizing: border-box前缀，且必须写在标准属性之前：-ms-box-sizing: border-box; box-sizing: border-box;
验证方法：打开「Computed」面板，直接搜 box-sizing，确认最终计算值；再点右侧「Styles」标签，看哪条规则被划掉或标灰 —— 那就是被覆盖了。
为什么设置了 border-box，下边框还是被挤没了
典型场景：div { height: 100vh; } 包裹一个 input { height: 100vh; border: 1px solid red; box-sizing: border-box; }，但下边框不显示。这不是 box-sizing 失效，而是高度计算溢出导致裁剪。
-
100vh是视口高度，加上border后总高 =100vh + 2px，父容器无法容纳，溢出部分被裁剪（尤其当父容器overflow: hidden时） -
box-sizing: border-box只让height包含border，但它不改变父容器的height计算逻辑 —— 如果父容器也是100vh，子元素设height: 100vh就已占满，再加border仍会溢出（除非父容器也设box-sizing: border-box且自身无 padding/border） - 解决办法不是调
box-sizing，而是改尺寸表达式：height: calc(100vh - 2px)，或给父容器留出边框空间 - 注意：某些旧版 Safari 对
<input>的box-sizing支持不稳定，可兜底加min-height: 0或用display: block
为什么 DOCTYPE 缺失会导致 box-sizing 彻底失效
在 IE6–8 或部分 WebView 内核中，没有 会触发怪异模式（Quirks Mode），此时浏览器完全忽略 <code>box-sizing 属性，哪怕写了也显示为灰色或带删除线。
必须是 HTML 文件第一行，前面不能有空格、注释或 XML 声明- IE8 需要
-ms-box-sizing前缀，且必须与标准属性共存，顺序不能反 - 现代项目虽可忽略 IE8，但微信 X5 内核（v3.7 以下）、部分国产浏览器 WebView 仍存在怪异模式残留问题，建议统一加 DOCTYPE
- 检查方式：DevTools 中「Rendering」或「Elements」面板顶部会提示当前文档模式
真正容易被忽略的是：box-sizing 生效的前提，是整个文档从第一个字节起就运行在标准模式下 —— 动态插入的节点、第三方 SDK 加载的 DOM、甚至 SVG 里的 <foreignobject></foreignobject>，都依赖这套初始解析逻辑。漏掉 DOCTYPE 或伪元素覆盖，等于没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
