用flex布局实现两行头部最可控：外层display: flex + flex-direction: column，第一行设min-height: 64px，第二行用flex: 0 0 48px；避免absolute/float和line-height伪布局，响应式推荐rem/vh加clamp()。
用 flex 布局实现两行头部，高度各自独立
直接用 display: flex + flex-direction: column，再给每行设固定或自适应高度，是最可控的方式。绝对定位或 float 容易破坏文档流，响应式时更难收场。
- 第一行（如 logo 区）设
height: 64px或min-height: 64px - 第二行（如导航栏）设
height: 48px或flex: 0 0 48px（推荐后者，语义更准） - 外层容器必须设
display: flex和flex-direction: column，不能只靠子元素自己撑开 - 避免对子元素用
position: absolute—— 后续加搜索框、用户头像等交互元素时，定位会互相打架
grid 布局写法更简洁，但 IE 不支持
如果项目不用兼容 IE11，display: grid 是更直观的选择：两行高度直接写在 grid-template-rows 里，无需额外 wrapper。
- 外层设
display: grid，grid-template-rows: 64px 48px - 两行元素按顺序写进 HTML，不需额外 class 控制顺序
- 若某行内容超长（比如导航项过多换行），
64px会硬截断；改用minmax(64px, auto)更稳妥 - 注意
grid-gap会额外增加间距，要算进总高度；用gap替代老写法更安全
line-height 陷阱：别用它“假装”两行头部
有人把整个 header 写成单个 <div>，靠 <code>line-height 和 vertical-align 挤出两行效果——这本质是 hack，后续加 hover、下拉菜单、移动端折叠都会出问题。
-
line-height只控制行内元素的基线间距，不是布局工具 - 文字溢出或中英文混排时，
line-height计算不可控，高度会漂移 - 无法单独给某一行绑定事件（比如只让导航栏可点击）
- 无障碍阅读器会把两行内容读作同一段落，语义断裂
响应式下高度怎么变？别只改 px
纯 px 高度在小屏上容易撑破视口，尤其 iOS Safari 的地址栏隐藏/显示会触发重绘。要用相对单位+媒体查询兜底。
立即学习“前端免费学习笔记（深入）”；
- 主方案用
rem或vh（如6.4rem或10vh），再配合@media (max-width: 768px) - 媒体查询里优先调低第二行高度（导航精简后 40px 足够），第一行 logo 行保持视觉权重，别盲目等比缩放
- 避免在
@media里用!important覆盖高度——后面维护的人很难理清优先级链 - 真要动态计算，用 JS 监听
resize改style.height是下策；CSS 自身的clamp()更轻量（如height: clamp(48px, 8vh, 64px)）
