子元素不居中是因为只设display: flex而未配对使用justify-content: center和align-items: center，且父容器可能缺少显式高度；轮播遮挡是因绝对定位导致父容器高度塌陷，需用height或aspect-ratio修复；iPad断点失效常因viewport设置错误；grid-template-areas不生效多因grid-area值与模板字符串不完全匹配。
用 display: flex 布局头部和导航时，为什么子元素不居中？
常见错误是只给父容器设了 display: flex，却漏掉 justify-content 和 align-items。Flex 容器默认主轴是水平方向，justify-content: center 控制水平居中，align-items: center 控制垂直居中——两者要配对用才有效。
- 如果导航文字上下贴边，大概率是没加
align-items: center，或父容器高度未显式设定（比如没设height或min-height） - 移动端常加
flex-wrap: wrap防止换行错乱，但记得配合justify-content: space-between或space-around重排间距 - 注意 Safari 旧版本对
align-items: center在min-height容器中的兼容性，稳妥起见可补一句height: fit-content
轮播图区域用 position: absolute 后，下方内容被遮挡怎么办？
绝对定位元素脱离文档流，父容器高度塌陷，导致后续模块“上浮”覆盖。这不是 bug，是 CSS 的预期行为，必须手动恢复父容器高度。
- 最简方案：给轮播父容器加
height（如height: 400px），但响应式下需配合媒体查询 - 更健壮的做法：用
aspect-ratio: 16 / 9替代固定高度，现代浏览器支持良好，且能随宽度自适应 - 若轮播内部图片加载慢，可能造成闪动，建议给
img标签加width: 100%; height: 100%; object-fit: cover;并预设宽高比容器
响应式断点写 @media (max-width: 768px) 为什么在 iPad 上失效？
iPad（尤其是新机型）的 viewport 缩放和设备像素比会让 CSS 媒体查询读到的是逻辑像素而非物理分辨率，768px 断点在部分 iPad 横屏下实际视口宽度是 1024px，但竖屏下又可能是 768px —— 关键不在设备型号，而在 viewport 设置是否准确。
- 检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否缺失或写错 - 避免只依赖单一断点，推荐组合使用：
@media (max-width: 768px), (max-device-width: 768px) and (orientation: portrait) - 真机调试时，Safari 开发者工具里“显示渲染边界”能直观看到视口尺寸，比模拟器更可靠
用 grid-template-areas 排版三栏内容，为什么区域名称不生效？
grid-template-areas 要求每个子元素必须有 grid-area 值，且值必须与模板中定义的字符串完全一致（包括空格、换行、引号）。大小写敏感，多一个空格就匹配失败。
立即学习“前端免费学习笔记（深入）”；
- 模板里写的是
"header header header"，对应元素就得设grid-area: header，不能写成Grid-Area: Header - 如果某区域跨多行，模板中对应位置必须重复相同名称，例如
"sidebar main main"和下一行"sidebar footer footer" - IE 不支持
grid-template-areas，如需兼容，得降级为grid-column/grid-row手动定位，或改用 Flex 布局模拟
