是，border宽度一定占用空间，但是否计入设置的width值取决于box-sizing：content-box下额外增加总宽，border-box下从width中扣除，确保总宽严格等于设定值。
border宽度是否计入元素总宽度？
是，border宽度一定占用空间，但“是否算进你写的width值里”，取决于box-sizing。默认box-sizing: content-box时，border额外加在内容区外；设成box-sizing: border-box后，它从内容区里扣，width值就是最外沿总宽。
为什么border会导致元素换行或溢出？
典型现象：两个width: 50%的子元素并排，加了border: 1px和padding: 8px后直接换行——因为实际宽度超了100%。
- 在
content-box下：每个元素实际宽度 =50%+16px（左右padding） +2px（左右border） - 父容器没留余量，总和必然 > 100%
- Flex/Grid 容器中更隐蔽：子项
flex: 1不填满，可能就卡在min-width: auto+border撑出来的最小宽度上
如何让border不破坏布局计算？
最直接有效的做法是全局启用border-box：
*, *::before, *::after {
box-sizing: border-box;
}
但要注意几个实操细节：
-
box-sizing不继承，只设父元素没用，必须显式覆盖或靠重置生效 - 某些UI库（如旧版Ant Design）会单独重置部分组件的
box-sizing，需用开发者工具检查computed styles - 如果用
calc()动态减去边框（如width: calc(100% - 4px)），手算易错，且响应式断点下容易失效 -
outline不参与盒模型计算，视觉类似border但不影响尺寸，别混淆
border影响对齐时最容易被忽略的点
border本身不改变text-align或justify-content逻辑，但它悄悄改了元素“实际占位大小”，从而间接破坏对齐：
- 块级元素
margin: 0 auto居中失败？很可能是因为width设的是内容宽，加上padding和border后总宽超出父容器 - Flex项目垂直居中偏移？检查
border-bottom是否把基线往下压了，尤其搭配align-items: center时 -
border-radius不影响盒模型计算，但圆角会让视觉边界模糊，误判“是否对齐”
真正要控制位置，得先稳住尺寸——box-sizing: border-box不是锦上添花，而是布局契约的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
