百分比布局生效需父容器有明确宽度上下文且box-sizing合规；高度百分比须整链设高或改用vh/flex；padding/margin百分比均依父宽计算，border不支持百分比；flex/grid中优先用flex/fr而非width百分比。
百分比布局不是“设个width: 50%就完事”，它生效的前提是父容器有明确的宽度上下文，且盒模型行为符合预期；多数失效问题其实出在参照对象错误、高度链断裂或box-sizing被忽略上。
父元素没设宽，子元素width: 50%就乱飘
百分比宽度永远相对于**包含块的 content box 宽度**，不是父元素的 padding 区域，更不是视口。如果父元素是默认 display: block 且没设 width，它的宽度由内容撑开——此时子元素的 50% 就是“内容撑出来的那个不确定值的一半”，结果不可控。
- 确保父容器有明确宽度来源：比如
max-width: 1200px+margin: 0 auto，或嵌套在flex/grid容器中 - 避免仅靠
width: 100%传递宽度：body默认已是 100% 宽，再写一遍无意义；关键是中间层是否“断链” - 用开发者工具检查 computed width：如果父元素显示
width: auto，那子元素的百分比基本已失效
height: 50% 大概率不生效，别硬试
高度百分比比宽度更脆弱，因为浏览器默认不给父元素设高——height: auto 是常态，而 50% of auto 在 CSS 中是非法计算，直接退化为 auto。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须整条链上所有父级（包括
html和body）都显式设高，例如：html, body { height: 100%; margin: 0; } - 更推荐绕过链式依赖：
height: 100vh或min-height: 100dvh（iOS Safari 兼容更好），或用display: flex+flex: 1替代 - 表格单元格（
td）内设height: 100%几乎无效，改用table-layout: fixed配合固定列宽，或直接换grid
padding/margin 用百分比时，全按父元素宽度算
padding 和 margin 的百分比值，无论上下左右，**全部参照父元素的 width**，不是 height。这是很多人写 padding-top: 50% 想做正方形却失败的原因——它和高度无关。
- 想让元素宽高相等（如头像容器），用
padding-top: 100%+height: 0+ 绝对定位子元素，而不是指望height: 100% -
border不支持百分比单位，写border-width: 2%会直接被忽略 - 当父元素有
padding或border，又子元素用width: 100%，记得设box-sizing: border-box，否则总宽溢出
Flex/Grid 里还该不该用width: 50%？
可以，但优先级低、语义弱。Flex 容器中 width 只作为初始基准，会被 flex-grow/flex-shrink 覆盖；Grid 列轨道用百分比虽可行，但混合 fr 单位时容易计算错位。
- Flex 布局中，用
flex: 2/flex: 3替代width: 40%/width: 60%，自动处理内容最小宽度和间距 - Grid 中列定义优先写
grid-template-columns: 1fr 2fr，而非33.33% 66.66%；百分比只在需严格匹配设计稿像素比例时才用 - 注意
flex: 1≠width: 100%：前者分配剩余空间，后者强制占满父容器，且受min-width: auto影响（文字多时会撑宽）
真正卡住人的从来不是语法写错，而是没意识到百分比是“相对计算”，而参照物本身可能根本没被定义清楚——尤其在嵌套多层、混用定位和表格的旧项目里，查一层父元素的 computed height/width，往往比重写三行 CSS 更快解决问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
