HTML5本身不提供新布局模型，百分比布局依赖CSS盒模型及Flexbox、Grid等机制；百分比值始终相对于包含块content box宽度计算，需注意box-sizing、父元素高度设定及flex/grid中属性优先级。
HTML5 本身不提供新的布局模型，所谓“HTML5 百分比布局”实际依赖的是 CSS 的盒模型和现代布局机制（如 Flexbox、Grid）配合百分比单位实现。纯靠 或 设置 width: 100% 没有意义——所有块级元素默认就是 100% 宽度，关键在如何控制内部元素的尺寸关系与响应行为。
百分比宽度的参照对象是谁？
百分比值（如 width: 50%）始终相对于**包含块（containing block）** 的宽度计算，不是视口、不是父元素的 padding 区域，而是父元素的 content box 宽度（除非父元素有 transform、position: absolute 等特殊情形）。
常见误判点：
- 父元素没设
width，但自身是display: block—— 它的宽度由内容或浏览器默认撑开，此时子元素的50%可能远超预期 - 父元素设置了
padding或border，但子元素用width: 100%—— 实际会溢出，因为width不含 padding/border（除非box-sizing: border-box） -
height: 50%在多数情况下无效，因为父元素高度若未显式设定（如height: 400px或height: 100vh），其高度为auto，导致子元素无法计算百分比高度
flex 布局中百分比还管用吗？
在 Flex 容器里，width 百分比仍生效，但优先级低于 flex 相关属性。例如：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.item {
width: 30%;
flex: 0 1 auto; /* 此时 width 会作为基准，但可被 flex-shrink/grow 调整 */
}更推荐的做法是放弃百分比，直接用 flex 属性控制比例：
.item-1 { flex: 2; } /* 占 2 份 */
.item-2 { flex: 3; } /* 占 3 份 */
/* 总共 5 份，等效于 40% / 60%，且自动处理 margin/padding 和最小宽度限制 */注意：flex: 1 不等于 width: 100%；它表示「等分剩余空间」，且受 min-width: auto 影响（文本内容可能撑宽）。
grid 布局里怎么用百分比才不踩坑？
Grid 中，width 百分比依然参照包含块，但列/行轨道定义（grid-template-columns）支持直接写百分比：
.grid {
display: grid;
grid-template-columns: 25% 1fr 25%; /* 第一列 25%，中间自适应，第三列 25% */
width: 100%; /* 必须确保 .grid 本身有明确宽度上下文 */
}但要注意：
- 百分比列宽在
grid-template-columns中是相对于网格容器宽度，而非视口 - 如果容器父级没有设定宽度（比如 在
里，而无宽度限制），百分比列可能压缩到最小内容宽- 避免混用
%和fr时忽略隐式 min-size：浏览器默认对 grid item 应用min-width: 0（新版），但旧版或某些场景需手动加min-width: 0防止溢出真正决定百分比布局成败的，从来不是 HTML5 标签，而是你是否清楚每个百分比值背后那个「参照物」在哪，以及是否意识到
box-sizing、flex、grid各自接管了哪些尺寸控制权。漏掉一个box-sizing: border-box，或者忘了给父容器设height就去写height: 80%，问题就藏在这里。 - 避免混用
