根本解法是用「剩余法」预留弹性空间：width为基准，padding设内部呼吸感（配合box-sizing:border-box），margin仅用于块级分隔；高度剩余法通过固定高度+负margin消除间隙；flex中统一用gap控间距，viewport与rem协同保障缩放稳定。
网页布局“一缩放就错位”“一改字体就挤在一起”，根本不是浏览器问题，而是你没给尺寸留出弹性空间。核心解法不是死磕像素，而是用「剩余法」主动预留可变区域。
为什么 width + padding + margin 顺序不能乱
盒子尺寸稳定性有明确优先级：width > padding > margin。因为 margin 会合并、会塌陷，padding 虽稳定但会撑大盒子总宽（除非设 box-sizing: border-box），而 width 是最可控的基准。
- 写
width: 300px时，哪怕内容只占 200px，也强制占满——这是“宽度剩余法”的起点 - 再用
padding做内部呼吸感，比如padding: 1rem，配合box-sizing: border-box确保不突破width -
margin只用于块级元素间分隔，避免在父子或相邻兄弟间混用，尤其别依赖margin-top拉开标题和正文这种操作
高度剩余法怎么用在真实场景里
典型例子：评论区上方有个 <h2></h2> 标题，下方紧接一个 <textarea></textarea>。你发现它们之间总有几像素空隙，调 margin 或 padding 都不稳定？这不是 bug，是机会。
- 给
<h2></h2>设固定高度，比如height: 48px，文字默认靠左上对齐，下面自然空出余量 - 把
<textarea></textarea>的margin-top设为负值（如-12px），刚好吃掉那点空隙 - 这个“空出来又吃掉”的过程，就是高度剩余法——用可预测的盒模型行为替代不可控的渲染间隙
flex 容器里如何避免 gap 和 padding 冲突
用 display: flex 布局时，gap 看似方便，但它和子项的 padding 会叠加，导致实际间距翻倍或错位。
- 统一用
gap控制主轴/交叉轴间距，子项内部只用padding处理自身内容呼吸感，别再设margin - 如果必须兼容老浏览器（IE），改用
margin-right+last-child清除，但要加flex-wrap: nowrap防换行 - 注意
gap不作用于第一个和最后一个子项外侧，所以容器自身的padding仍需单独设置
viewport 和 rem 配合才能真正稳住缩放
光改 CSS 单位不够，<meta name="viewport"> 漏了，所有 rem 都白搭。
- 必须写
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 缩放时会重置根字体大小 -
html元素的font-size别写死，用 JS 动态计算或媒体查询适配，比如@media (min-width: 768px) { html { font-size: 16px; } } - 所有
padding、margin、width（除最大宽度限制）都用rem，max-width用px或vw更稳妥
真正难的不是写对某一行代码，而是判断哪里该留余量、哪里该卡死、哪里该交由浏览器自动计算。尺寸预留不是加 padding，是设计盒子的“可变边界”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
