font-size 改变后布局错乱的本质是 line-height 未同步调整，应使用无单位数值（如1.4）使行高始终为当前字号的相对倍数，避免用px/em/rem写死，确保父容器提前设置好无单位line-height。
font-size 改变后布局错乱，本质是行高没同步调整
文字大小变化时布局撑开或重叠，通常不是 font-size 本身的问题，而是默认 line-height 的计算方式导致行盒（line box）高度突变。浏览器对未显式设置 line-height 的元素，会按 font-size 的倍数（如 1.2）计算，但这个倍数是基于当前字号的绝对值——字号一变，行高就跳变，父容器高度、相邻元素间距全跟着偏移。
用无单位数值设置 line-height 才能真正解耦字号与行高
必须避免用 px、em 或 rem 写死 line-height，否则它会脱离字体尺寸独立存在，失去响应性。正确做法是使用无单位数值（如 1.4），让行高始终是当前 font-size 的相对倍数：
body {
font-size: 16px;
line-height: 1.5; /* 实际行高 = 16 × 1.5 = 24px */
}
<p>h1 {
font-size: 24px; /<em> 行高自动变成 24 × 1.5 = 36px </em>/
}- 无单位
line-height是继承值，子元素拿到的是数值本身，不是计算后的像素值 - 如果父元素设了
line-height: 2，子元素font-size: 12px，那它的行高就是24px，不是继承父级的24px固定值 - 慎用
line-height: normal，它由字体和 UA 决定，跨字体/浏览器表现不一致
内联元素（如 span）文字变大时容易溢出行框
当给 <span></span> 这类内联元素单独增大 font-size，而其父容器（如 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>）的 line-height 没覆盖到该行，就会出现文字顶破上一行或下沉挤占下一行。解决关键不是调 vertical-align，而是确保整行的行盒高度能包容最大字号：
- 在父容器（如
p）上设置足够大的无单位line-height，比如1.6而非1.2 - 避免对内联元素单独设
line-height，除非你明确需要局部拉伸行距 - 若必须微调某段文字的垂直位置，优先用
vertical-align: middle或text-top，而不是硬调line-height
flex / grid 布局中 font-size 变化仍可能破坏对齐
即便用了无单位 line-height，在 display: flex 容器里，文字大小变化仍可能导致 align-items: center 失效——因为基线对齐（baseline）会随字体变化偏移。这时候不能只靠 line-height 补救：
立即学习“前端免费学习笔记（深入）”；
- 对 flex 项目加
align-self: center并配合margin微调，比依赖基线更可控 - 在文字容器上设
display: flex; align-items: center; height: Xpx，用高度锚定垂直居中 -
line-height在 flex 项中仅影响内部行盒，不影响 flex 自身的主轴/交叉轴对齐逻辑
实际中最容易被忽略的是：父容器的 line-height 必须在文字尺寸变化前就设好，且用无单位值；一旦用像素写死，后续所有 font-size 调整都会变成“手动修 bug”。
