盒模型的 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 又可能在小屏上无法填满。二者配合才能兼顾弹性与约束。
典型写法：
立即学习“前端免费学习笔记（深入）”；
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
-
width: 100%确保小屏下占满可用空间 -
max-width设为设计稿最大宽度（如1200px），防止大屏溢出 -
margin: 0 auto实现水平居中，注意它依赖块级元素和明确宽度
内边距和外边距也该用相对单位，但别混用 em 和 %
padding 和 margin 若用固定像素，在小屏上会撑破容器；若全用 %，又容易因父容器高度不确定导致垂直方向不可控（尤其 padding-top: 10% 是按父容器宽度计算的）。
- 水平方向优先用
%（如padding: 0 5%），与宽度协同缩放 - 垂直方向推荐用
rem或视口单位（如padding-top: 2rem或vh），避免依赖父高 - 慎用
em做响应式间距——它继承父元素字体大小，嵌套深时易失控
Flex/Grid 容器内部子项的百分比宽度可能失效
当父容器是 display: flex 或 grid 时，子元素的 width: 50% 往往被忽略，因为 Flex/Grid 有自己的尺寸分配逻辑（如 flex-basis、grid-template-columns）。
- Flex 子项想等分：用
flex: 1或flex: 0 0 50%，后者才真正尊重百分比 - Grid 子项想等分：直接写
grid-template-columns: 1fr 1fr，而非给子项设width - 若必须用百分比（如兼容老浏览器），需额外加
min-width: 0防止 flex item 默认最小宽度干扰
box-sizing 和相对单位的协同）是百分比布局不出错的前提。很多人卡在“写了 width: 100% 为什么还是换行”，其实问题不在百分比，而在没关掉 content-box 的陷阱。 
