百分比宽度以包含块宽度为基准，padding/margin百分比也按父宽计算以防循环，height百分比需包含块高度确定，box-sizing影响实际占位。
百分比宽度到底以谁为基准？
元素的 width: 50% 永远基于其**包含块（containing block）的宽度**，不是父元素的 height，也不是自身尺寸，更不是视口宽度——除非父元素恰好是根元素或触发了特殊定位上下文。
- 普通流中，包含块通常是最近的块级父容器（如
div），它的width决定子元素所有方向的百分比计算基准 - 若父元素宽度为
auto（比如未设宽的div在文档流中撑满），则子元素width: 50%仍有效，因为auto宽度在布局阶段会被计算出来，再参与百分比运算 - 但浮动、绝对定位、flex 项目等会改变包含块定义：例如
position: absolute元素的包含块是最近的position: relative/absolute/fixed祖先的padding box，此时百分比宽度就相对于该祖先的 padding 区宽度
padding/margin 百分比为什么总按父宽算？
padding-top: 20% 和 margin-bottom: 10% 都用父元素宽度计算，这是 CSS 规范刻意设计的“防循环机制”——避免垂直方向依赖父高度，而父高度又可能依赖子元素 padding，形成死锁。
- 父元素宽 600px →
padding-top: 15%=90px，哪怕父高只有 100px 也照算 - 这个规则统一适用于所有方向：
padding-left、padding-bottom、margin-right全部按父宽算，无例外 - 常见误判：以为
padding-bottom: 30%是“占父高 30%”，结果在窄高容器里 padding 小得看不见，在宽矮容器里却撑出巨大空白
height 百分比为何经常失效？
height: 50% 不像 width 那样“天然可靠”，它要求**包含块的高度必须有确定值（非 auto）**，否则浏览器无法计算，直接退化为 height: auto。
- 父元素没设
height或设了height: auto→ 子元素height: 50%无效（表现为内容高度） - 解决路径只有两条：显式设置父高（如
height: 400px或min-height: 100vh），或用现代布局替代（display: flex+align-items: stretch） - 注意：即使父元素用了
height: 100%，若它的父级也没高度，链式失效依然发生——必须从某个有确定高度的祖先开始“破局”
box-sizing 如何悄悄破坏你的百分比预期？
默认 box-sizing: content-box 下，width: 100% 只管内容区，一旦加了 padding 或 border，元素就会撑出父容器——这不是百分比错了，而是盒模型把 padding/border 算在了“额外”位置。
- 典型现象：
width: 100%; padding: 20px;的 div 溢出父容器左右各 20px - 修复方式：统一加
box-sizing: border-box，让width: 100%真正代表“占满父宽”，padding 和 border 向内压缩 - 全局生效写法：
* { box-sizing: border-box; }（IE8+ 支持，无需前缀）
百分比布局的复杂性不在“怎么写”，而在“谁决定基准”。真正卡住人的，往往是父容器的包含块身份不明确、高度未闭合、或盒模型模式未重置——这些细节不暴露在代码表面，却直接决定百分比是否如你所想地工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
