盒模型的 box-sizing 必须设为 border-box，否则 width: 100% 仅含内容区，加上 padding 或 border 会导致实际宽度超容器，引发横向滚动或布局错位；响应式中该误差会被放大。
盒模型的 box-sizing 必须设为 border-box
默认的 content-box 会让 width: 100% 只包含内容区，一旦加了 padding 或 border，实际宽度就超出了容器，导致横向滚动或布局错位。响应式中用百分比宽度时，这个误差会被放大。
所有参与响应式布局的元素都应统一设置：
*, *::before, *::after {
box-sizing: border-box;
}
- 避免在每个组件里重复写，全局重置最稳妥
- 第三方 UI 库（如 Bootstrap）通常已做此处理，但自定义组件仍需检查
- IE8+ 支持
box-sizing，无需前缀；旧版 Android Browser 需要-webkit-box-sizing
百分比宽度 + max-width 组合控制伸缩边界
只写 width: 100% 在大屏上会无限拉宽，文字过长、图片失真；只写 max-width 又可能在小屏上无法填满。二者配合才能兼顾弹性与约束。
典型写法：
