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
替代盒模型：box-sizing: border-box
当设置 box-sizing: border-box 时，width 和 height 包含了内容、padding 和 border 的总和：- 此时设置 width: 200px; 表示内容区 + 内边距 + 边框的总宽度为200px
- 如果增加了border，内容区域会自动缩小以保持总宽不变
border如何影响页面布局
由于border增加实际尺寸，可能引发以下问题：- 两个块级元素横向排列时，若总宽度加边框超过父容器，会导致换行
- 表格或卡片布局中出现意外的滚动条
- 动画过程中边框出现时造成布局跳动
基本上就这些。理解border是否占空间，关键在于掌握当前使用的盒模型类型。合理使用 box-sizing 可以避免多数因边框引起的布局问题。
