会占用空间，但是否计入设定的width/height由box-sizing决定：content-box下border额外占空间，border-box下从内容区扣除，总宽高不变。
border 会占用空间吗？取决于 box-sizing
会，但是否“算进你写的 width 里”，完全由 box-sizing 决定。默认 box-sizing: content-box 下，border 绝对额外占空间；设成 border-box 后，它就从内容区里“扣出来”，总宽不变。
content-box 下 border 导致的典型翻车场景
你写 width: 50% 的两个并排卡片，各加 padding: 16px 和 border: 1px，结果直接换行——因为实际宽度超了 50%。
- 计算方式：50% + 左右
padding+ 左右border-width> 50% - Flex 容器中子项设
flex: 1却不填满？很可能边框撑出了父容器 - 表单输入框高度不一致？
height: 36px+padding: 8px+border: 1px在 content-box 下实际高 54px
用 border-box 解决尺寸失控的实操建议
最简单有效的方式是全局重置：* { box-sizing: border-box; }，现代项目基本都这么干。
- 兼容性极好：IE8+ 原生支持，无需前缀
- 配合响应式单位更稳：用
rem或百分比时，加边框不会意外溢出或错位 - 注意：只影响
width/height与padding/border的关系，margin始终在外，不受影响 - 如果重置后某处布局异常，优先检查是否误用了过大的
margin，而不是怀疑box-sizing
容易被忽略的关键细节
border-radius 不影响盒模型计算，但它会让视觉边界变软；margin 虽然不占元素自身尺寸，但垂直方向存在合并现象，和 box-sizing 无关，却常被一起误判。
立即学习“前端免费学习笔记（深入）”；
真正让 border “消失于尺寸计算”的不是删掉它，而是用 box-sizing: border-box 把它收编进设定宽高中——这是多数人理解盒模型时卡住的第一道坎。
