百分比宽度参照其包含块的content width，而非设备宽度；普通流中父元素为static/relative时参照父content width，absolute/fixed时参照最近定位祖先或视口；margin/padding百分比均参照父width，top/bottom百分比参照父height（需明确值）；width:100%溢出主因是box-sizing:content-box与父padding/border叠加；现代开发中flex/grid已替代纯百分比布局，因其难处理等高、垂直居中且嵌套后数值失控；仅在单层流式容器、栅格列宽、图片占位及媒体查询微调等语义清晰场景下可靠使用。
百分比宽度不是“设计稿像素 ÷ 设备宽度”这种直觉换算，而是严格按 CSS 规范，相对于其 包含块（containing block）的 content width 计算——哪怕你写了 box-sizing: border-box，它也只影响自身盒模型，不改变子元素的计算基准。
百分比宽度到底参照谁？
关键看父元素是否是「包含块」，而包含块由定位上下文决定：
- 普通流中，父元素是
static或relative定位 → 子元素的width: 50%参照父元素的 content width（即width - padding - border） - 父元素是
absolute或fixed定位 → 子元素的width: 50%参照最近的「定位祖先」的 content width；若无，则参照初始包含块（视口） -
margin和padding的百分比值，无论方向，一律参照父元素的width（不是 height） -
top/bottom百分比参照父元素的height，但前提是父元素高度有明确计算值（不能是auto）
为什么写了 width: 100% 还溢出？
常见于父容器设置了 padding 或 border，而子元素用 width: 100% + 默认 box-sizing: content-box：
.parent {
width: 300px;
padding: 20px;
border: 10px solid #ccc;
}
.child {
width: 100%; /* 实际 = 300 - 2×20 - 2×10 = 240px */
}
此时 .child 渲染宽度为 240px，但若再加 padding 或 border，就会突破父容器边界。解决办法只有两个：
- 给
.child加box-sizing: border-box，让它把 padding/border 算进 100% 里 - 或让
.parent用box-sizing: border-box（不影响子元素计算基准，但让父容器自身更可控）
移动端用百分比布局的现实陷阱
在现代移动开发中，纯百分比布局已基本被 Flex/Grid 替代，原因很实际：
- 无法处理「等高列」或「垂直居中」这类基础需求，必须靠 hack（如
display: table-cell） - 嵌套层级一深，百分比层层相乘，数值完全不可控（比如三层
width: 50%，最终只剩 12.5%） - 文字、图片、按钮等非容器元素无法靠百分比自适应缩放，仍需额外 media query 或 rem 配合
- 安卓 WebView 和旧版 iOS Safari 对
padding-bottom: 50%这类依赖宽高的百分比支持不稳定
什么时候还能放心用百分比？
不是全盘否定，而是聚焦在它真正可靠、语义清晰的场景：
- 单层流式容器：如
.container { width: 90%; max-width: 1200px; margin: 0 auto; } - 栅格系统中的列宽（配合
float或inline-block，但注意清除浮动） - 图片容器占位：
.img-wrapper { width: 100%; padding-bottom: 56.25%; position: relative; }（配合子元素绝对定位实现响应式宽高比） - 媒体查询内作为微调手段：
@media (max-width: 768px) { .sidebar { width: 100%; } }
真正容易被忽略的是：百分比本身没有“响应”能力，它只是静态相对计算；所谓“响应式”，必须靠媒体查询触发不同百分比规则，或靠父容器尺寸被 viewport / flex / grid 动态驱动——否则它只是“可缩放”，不是“响应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
