必须用, ::before, *::after { box-sizing: border-box; }全局覆盖并置于CSS最顶部，因伪元素不继承该属性、第三方组件样式可能覆盖、旧版Safari对表单控件支持不稳定，仅局部设置或漏掉伪元素会导致布局错位。
直接写 box-sizing: border-box 通常不够——错位还在，大概率是伪元素、第三方组件或父容器没同步改，导致部分节点仍按 content-box 计算。
为什么写了 box-sizing: border-box 还错位
不是语法错，而是覆盖不全：
- 伪元素（
::before/::after）不继承该属性，哪怕父元素设了border-box，它们仍按默认content-box算尺寸 - 第三方 UI 库（如
.el-input、.ant-btn）内部样式用!important或更高权重覆盖了你的声明 - 旧版 Safari（13.1 之前）对
<input>和<textarea></textarea>的border-box支持不稳定，写了也回退
检查方法很简单：打开 DevTools，选中错位元素，看「Computed」面板里 box-sizing 的最终值。如果显示 content-box，说明它没被你写的规则生效。
真正生效的全局写法必须包含伪元素
只写 * { box-sizing: border-box; } 会漏掉伪元素；UI 库的 CSS 文件加载在你之后，自然覆盖你的声明；某些表单控件在 Safari 13.1 之前无视 border-box，哪怕写了也回退。
立即学习“前端免费学习笔记（深入）”；
必需动作是：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
*, *::before, *::after {
box-sizing: border-box;
}这条规则要放在所有 CSS 文件最顶部（不是某个局部文件里），确保优先级最高。很多清浮动、图标装饰、状态提示都靠伪元素实现，它们一旦仍是 content-box，加个 border: 1px 就多占 2px，百分比布局立刻偏移。
遇到第三方组件错乱怎么办
别硬刷全局 !important，先定位具体类名再精准覆盖。比如 Element Plus 的输入框错位，查到实际渲染的是 .el-input__inner，就单独写：
.el-input__inner {
box-sizing: border-box;
}其他常见场景：
- Ant Design 表单控件错位，检查
.ant-input、.ant-select-selector - Tailwind 用户若用了
@layer base，需确认该规则是否包裹在@layer base内并前置 - CSS-in-JS（如 Emotion、Styled Components）需在全局
<style></style>标签或主题注入层里显式设置box-sizing: inherit
哪些地方必须手动切回 content-box
极少数场景下，border-box 反而会让逻辑变复杂：
-
<canvas></canvas>容器要求 width/height 严格对应绘图区域像素（例如设width: 500px就得保证getContext('2d').canvas.width === 500） - 使用
background-size: contain且依赖原始 content 尺寸对齐的图片容器 -
resize: both的可拖拽文本域，设为content-box更符合用户对“拉宽=内容区变宽”的直觉（但需手动处理 padding/border 溢出）
这时加一行 box-sizing: content-box; 即可，不需要改整个组件结构。
最容易被忽略的是：第三方 UI 组件库往往自带重置样式，可能局部覆盖你的全局设置。调试时盯着「Computed」面板里的 box-sizing 值看，别只看 class 名——哪怕 class 对了，那一行的实际生效值才是关键。
