position: absolute 使子元素脱离文档流致父容器高度塌陷；rem 与 vw 混用易致字体异常；flex 垂直居中需设 body min-height: 100vh；grid-template-areas 媒体查询中须重写全部区域；sticky 和 aspect-ratio 需注意兼容性。
position: absolute 会脱离文档流，导致父容器高度塌陷
当子元素设置 position: absolute，它不再参与父容器的高度计算。常见表现是：父 div 看似“空了”，背景色/边框不显示，后续元素上移。
解决思路不是硬加 height，而是判断是否真需要绝对定位：
- 若只是右上角图标、浮层按钮等「不占布局空间」的装饰性元素，
absolute合理，但父容器需用position: relative建立定位上下文 - 若本意是“右侧对齐但保留文档流位置”，优先改用
margin-left: auto+display: flex或text-align: right（配合inline-block） - 若必须用
absolute且要撑开父容器，只能手动设父容器min-height或用 JS 监听子元素尺寸（不推荐）
rem 与 vw 混用时，字体大小在小屏上可能过小或溢出
rem 依赖根字体大小，vw 依赖视口宽度，两者响应逻辑不同。混用如 font-size: calc(0.8rem + 0.5vw) 在 iPhone SE（375px）和 iPad（1024px）上缩放比例差异极大，容易导致文字不可读。
更可控的做法是分层控制：
立即学习“前端免费学习笔记（深入）”；
- 基础字号用
rem（例如html { font-size: 16px; }，配合媒体查询在 320px–480px 设为14px） - 标题等强调型文字可用
clamp()：font-size: clamp(1.2rem, 4vw, 2.5rem);
- 避免在同一个
font-size声明里同时出现rem和vw，浏览器计算精度和渲染时机可能导致意外跳变
flex 布局中 align-items: center 无法垂直居中整页内容
很多开发者写
body { display: flex; align-items: center; justify-content: center; }，却发现页面没居中——根本原因是 body 默认高度不等于视口高度，它只包裹内容，height: 100% 无效除非祖先链都设高。
真正生效的写法只有两种：
- 给
html和body都加height: 100%，再对body应用 flex - 直接对
body设min-height: 100vh（推荐），因为vh是视口单位，不受祖先高度限制
注意：100vh 在 iOS Safari 中可能包含地址栏高度，滚动时有偏移；如需精确，可用 100dvh（支持 Chrome 105+、Safari 16.4+）
使用 grid-template-areas 做响应式布局时，媒体查询内重复定义会覆盖而非合并
grid-template-areas 是字符串值，媒体查询中重新声明会完全替换原值，不会“叠加区域”。例如：
.layout {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"nav"
"footer";
}
}
上面代码在小屏下 nav 被挪到底部，但很多人误以为可以只改某一行，比如只写 "nav" —— 实际必须重写全部区域，否则缺失行会被视为 none，造成空白。
技巧：用 CSS 自定义属性简化维护：
:root {
--grid-areas: "header header" "nav main" "footer footer";
}
.layout {
grid-template-areas: var(--grid-areas);
}
@media (max-width: 768px) {
:root {
--grid-areas: "header" "main" "nav" "footer";
}
}
实际项目里，最常被忽略的是 position: sticky 的兼容性边界（iOS Safari 15.4 以下不支持 overflow: hidden 容器内的 sticky）和 aspect-ratio 的 fallback 方案。这些细节不报错，但一上线就错位。 
