border会占用空间，在box-sizing:content-box下增加元素总尺寸，而在border-box下宽度包含边框，内容区自动调整，合理使用可避免布局问题。
在css盒模型中，border是会占用空间的。它不仅影响元素的视觉表现，还会直接影响布局尺寸。
默认盒模型：box-sizing: content-box
在这种模式下，元素的宽度（width）和高度（height）仅指内容区域的大小。只要设置了border，就会在内容区域之外额外增加空间：
- 总占用宽度 = width + padding-left + padding-right + border-left-width + border-right-width
- 总占用高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width
例如，一个div设置 width: 200px; padding: 10px; border: 5px solid black; 实际占据的宽度为：200 + 10*2 + 5*2 = 230px。
替代盒模型：box-sizing: border-box
当设置 box-sizing: border-box 时，width 和 height 包含了内容、padding 和 border 的总和：
- 此时设置 width: 200px; 表示内容区 + 内边距 + 边框的总宽度为200px
- 如果增加了border，内容区域会自动缩小以保持总宽不变
这种模式更便于控制布局，尤其在栅格系统或响应式设计中广泛使用。
border如何影响页面布局
由于border增加实际尺寸，可能引发以下问题：
- 两个块级元素横向排列时，若总宽度加边框超过父容器，会导致换行
- 表格或卡片布局中出现意外的滚动条
- 动画过程中边框出现时造成布局跳动
解决方法是统一使用 box-sizing: border-box，并在设计阶段预留边框所占空间。
基本上就这些。理解border是否占空间，关键在于掌握当前使用的盒模型类型。合理使用 box-sizing 可以避免多数因边框引起的布局问题。
