border 总是占据空间，是否计入 width/height 由 box-sizing 决定：content-box 下不计入，总宽=width+padding+border；border-box 下计入，总宽恒等于 width。
border 是否计入 width/height，取决于 box-sizing
直接说结论：border 本身**总是占据空间**，但它是否“算进你写的 width 和 height 里”，完全由 box-sizing 决定。
-
box-sizing: content-box（浏览器默认）：width只指内容区，border和padding额外加在外部 → 总宽 =width+ 左右padding+ 左右border-width -
box-sizing: border-box：width指的是“边框最外沿的总宽”，border和padding都向内压缩内容区 → 总宽恒等于你写的width
为什么默认 content-box 容易导致布局错乱
写 width: 300px; padding: 12px; border: 1px solid #ccc;，实际占位是 300 + 12×2 + 1×2 = 326px。这种“隐性膨胀”在栅格、Flex 容器或固定宽度父容器中极易触发溢出或换行。
- 响应式断点失效：媒体查询按 300px 设计，结果元素撑到 326px，提前折行
- Flex 项超出容器：设
flex: 0 0 50%，但 border/padding 让它实际 >50%，破坏均分 - 表单控件对不齐：input 和 button 都设
width: 100%，但一个有 border 一个没，视觉错位
如何统一修复？别用 *，改用更安全的重置写法
* 选择器性能略差，且可能干扰某些第三方组件的内联样式。推荐以下写法，兼顾兼容性与可维护性：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
-
html根元素设为border-box，确保所有后代继承时有可靠 fallback -
*::before/*::after必须显式继承，否则伪元素仍走默认content-box - 该方案在 IE9+、所有现代浏览器中 100% 生效，无需前缀
调试时发现 border-width: 0 还占空间？检查 border-style
border-width: 0 **不会清除边框渲染**，除非同时设置 border-style: none 或省略 border-style（其默认值是 none）。只写 border-width: 0 而保留 border-style: solid，浏览器仍会预留边框位置（哪怕不可见）。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
border: 0 solid #000;→0是 width，但solid激活了边框盒，仍参与尺寸计算 - 正确写法：
border: none;或border-style: none;（此时border-width和border-color全部失效） - 验证技巧：在开发者工具中看 computed 样式，若
border-top-width显示为0px但border-top-style是solid，就说明它还在“占坑”
border-style 对计算的隐性干预 —— 它不画线，但可能悄悄撑开你的布局。 
