Box Model图中数值被划线表示该CSS声明被更高权重规则覆盖而未生效，并非计算错误；常见于打印样式、UI库精确选择器或伪元素未继承box-sizing等情况。
Chrome DevTools里Box Model图上数值被划线，说明什么
不是盒模型计算错了，是该尺寸声明被更高权重的CSS规则覆盖了。划线只出现在Styles面板中，表示这条样式没生效——它被另一条同名属性压掉了，比如你写了width: 200px，但后面又有一条width: 100%且选择器权重更高，前者就会被划掉。
为什么明明写了box-sizing: border-box却仍被划线
常见于以下几种情况：
- 你在屏幕样式里写了
* { box-sizing: border-box }，但打印预览或某些框架注入的样式块（如@media print）里又重置成了content-box，后者权重更高或位置靠后，就会划掉前面的 - 用了第三方UI库（如Ant Design），它在组件内部显式设了
box-sizing: content-box，且作用域更精确（比如.ant-input { box-sizing: content-box }），直接覆盖全局通配符 -
::before或::after伪元素默认不继承box-sizing，如果你没写*::before, *::after { box-sizing: border-box }，它们仍按content-box算，而这条规则常被忽略，导致视觉错位，DevTools里也可能显示被划掉
Computed面板没划线但尺寸还是不对，怎么办
说明样式生效了，但渲染结果不符合预期，这时候要查实际计算逻辑：
- 确认
width参照的是哪个容器：在@media print里，width: 100%参照的是@page内容区宽度（纸张宽 − margin），不是父元素 - 检查是否漏了
box-sizing: border-box !important——尤其在打印上下文中，浏览器会重置UA样式，!important才能压过默认content-box - 用Computed面板点开
box-sizing那一行，看来源是不是你写的文件；如果显示来自user agent stylesheet，说明你的规则根本没命中或被语法错误阻断 - 对
fieldset这类特殊元素，* { box-sizing: border-box }无效，必须单独写fieldset { box-sizing: border-box }并加!important
划线消失但布局仍错位，最容易忽略的点
划线没了只代表样式“写进去了”，不代表它起效了——特别是涉及flex、grid或filter时：
立即学习“前端免费学习笔记（深入）”；
-
flex子项即使box-sizing: border-box生效，若没配min-width: 0，旧版Chrome可能拒绝收缩，导致溢出 -
filter: blur()会让元素绘制区域扩大，但box-sizing完全不控制这个，必须靠父容器overflow: hidden裁剪，否则边缘模糊会撑开布局 -
gap在Grid里是刚性占位，它从容器总宽里扣除，但很多人误以为只是“间隙”，结果1fr 1fr+gap: 10px在799.5px容器下被舍入成399px/400px，肉眼可见不均——这和划线无关，但尺寸偏差一样明显
