border-width 默认增加元素总宽度，如width:200px加border:10px后实际宽220px；box-sizing:border-box可将其纳入width计算，但不改变渲染厚度且对table、动画等有局限。
border-width 怎么影响元素总宽度
默认情况下，border-width 会直接加到元素的 width 和 height 上——这是最常被忽略的尺寸来源。比如设了 width: 200px 和 border: 10px solid #000，实际占位就是 220px（左右各 +10px），不是 200px。
常见错误现象：div 设了固定宽度却撑出横向滚动条，或和相邻元素对不齐，八成是 border 悄悄加了尺寸。
- 只设置
border-top或border-left时，仅对应方向加尺寸 -
border-style: none或hidden时，border-width不参与盒模型计算（即使值是5px） - 使用
box-sizing: border-box可让width包含 border（推荐在全局重置中启用）
box-sizing: border-box 是不是万能解
它确实把 border-width、padding 都算进 width 里，但要注意：它不改变 border 本身的渲染厚度，也不影响子元素的布局上下文。
使用场景：做固定栅格、卡片、表单控件时，能避免反复心算边框占比；但做精确像素对齐动画（比如 border 渐变缩放）时，border-box 反而会让视觉节奏变难控制。
立即学习“前端免费学习笔记（深入）”；
- IE8+ 支持
box-sizing，但 IE8 需要-ms-box-sizing前缀 -
table元素默认是border-box，但部分浏览器对td的box-sizing行为不一致 - 用 flex 或 Grid 布局时，
border-width仍会影响flex-basis或grid-template-columns的基准尺寸
border-collapse 对表格边框的特殊处理
表格的边框计算规则和其他元素完全不同：border-collapse: collapse 下，相邻单元格的 border 会合并，最终显示宽度取两者中的较大值，而不是相加。
错误现象：给 th 和 td 同时设 border: 2px，结果看到的却是 2px 而不是 4px——这不是 bug，是规范行为。
-
border-collapse: separate（默认）下，边框独立计算，还会受border-spacing影响 -
collapse模式下，border-width仍参与盒模型，但只按“合并后可见宽度”计入尺寸 - 用
outline替代border绕开合并逻辑，但outline不占布局空间
border-width 支持哪些写法和兼容性陷阱
border-width 接受长度值（px、em、rem）、关键词（thin/medium/thick），也支持四值语法（上右下左）。但关键词的实际像素值由浏览器决定，不可靠。
性能影响极小，但滥用相对单位（如 border-width: 0.1em）在 font-size 频繁变化的组件里可能引发重排。
- chrome/firefox 对
thin解析为 1px，safari 在某些缩放比例下可能为 2px - 四值写法
border-width: 1px 2px 0 3px中，任意一项为0就代表该边无边框（注意不是“不可见”，而是不参与渲染和尺寸计算） - 用
border-image时，border-width只定义“图像边框”的铺放区域，不再控制线条粗细
border 的尺寸逻辑藏在盒模型底层，改一个 border-width 可能牵动整行布局；真正麻烦的不是怎么写，而是什么时候它“不算数”、什么时候它“偷偷算两次”。