CSS Grid 是复杂排版首选，因其二维布局能力可语义化定位元素，避免 float 或 inline-block 的维护与响应式难题；需注意父容器设 display: grid、子元素显式定位、响应式用 grid-template-areas 配合 @media、性能上慎用大量 grid-area。
为什么 CSS Grid 是复杂排版的首选方案
纯靠 float 或 inline-block 做多栏、不对称、跨区域排版，后期维护成本高、响应式难适配。CSS Grid 提供二维布局能力，能直接描述“第 2 行第 3 列放标题”这类语义，而不是靠嵌套 hack。
实际用时要注意：display: grid 必须作用在直接父容器上；子元素不会自动获得网格位置，得用 grid-column / grid-row 显式指定，否则全挤在第一个格子里。
- 常见错误：给子元素设
display: grid，却忘了父容器没设grid-template-areas或grid-template-columns，结果布局完全没变化 - 响应式关键：用
grid-template-areas配合@media重定义区域名，比反复改grid-column更可读 - 性能提示：避免在大量列表项（如 >100 条）上逐个设
grid-area，优先用repeat()+auto-fit配合minmax()
Flexbox 适合什么场景？别强行用它做网格
Flexbox 是一维布局工具，适合对齐、等高、流式换行这类任务。拿它硬凑三栏+侧边栏+页脚固定高度的结构，最终往往要加 wrapper、hack margin、或依赖 JS 补位。
典型误用：flex-wrap: wrap 做杂志式不规则图文混排——列高不一致会导致下一行错位，而 Grid 的 grid-auto-flow: dense 能自动填空。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：
nav导航条对齐、卡片组水平居中、表单控件右对齐标签 - 兼容性注意：IE11 对
flex-grow和min-width组合有 bug，若必须支持，改用flex-basis显式设宽 - 阅读体验关键：用
gap替代margin控制间距，避免父子 margin 合并导致的意外留白
font-size、line-height 和 rem 怎么配才不伤眼
字号不是越大越好，行高也不是越宽松越易读。核心是建立比例系统：基础字号设为 16px（浏览器默认），再用 rem 按比例缩放，确保缩放页面时文字与间距同步变化。
常见错误是把 line-height 设成固定像素值（如 line-height: 24px），一旦字号变大，行距就卡死不变，小字挤、大字空。
- 推荐写法：
font-size: 1.125rem（即 18px）配合line-height: 1.5（无单位），这样行高随字号等比缩放 - 段落首行缩进慎用
text-indent，尤其在响应式断点处可能和padding-left冲突，优先用padding控制整体内边距 - 小屏幕阅读体验：正文
font-size不低于1rem（16px），line-height至少1.4，否则字密行紧易疲劳
哪些 CSS 属性会悄悄破坏阅读流
有些样式看似只改外观，实则打断自然阅读节奏。比如 overflow: hidden 裁掉长段落末尾，white-space: nowrap 强制单行导致英文单词被截断，或者 transform: scale(0.95) 让整块内容轻微压缩，眼睛需要额外聚焦。
最隐蔽的是 will-change: transform——本意是优化动画，但滥用后浏览器会提前分配图层，反而增加内存占用，滚动时偶发文字模糊。
- 避免在
p或article上设height或max-height，除非明确要做折叠展开 - 禁用
-webkit-text-stroke做“描边字体”，在 Retina 屏上易出现锯齿，且对比度下降影响可读性 - 深色模式适配时，别只改
background-color，漏掉color-scheme: dark声明，系统级表单控件（如select下拉箭头）可能仍按亮色渲染
排版的复杂点不在语法多难，而在每个属性都在参与“人眼如何组织信息”。一个 gap 值、一行 line-height、甚至是否用了 subgrid，都会影响用户扫视、停顿、回跳的节奏。这些细节不报错，但累积起来就是“看着累”的原因。
