用 gap 代替 margin 控制网格/弹性容器内间距更健壮，只需在父容器设 gap 即可自动统一项目间距，不干扰子元素盒模型，且兼容现代浏览器。
用 gap 代替 margin 控制网格/弹性容器内间距
很多人还在用 margin 给子元素手动加间隔，结果一换布局就错位、一加响应式就崩。真正省事又健壮的方式是直接在父容器上设 gap——它只作用于容器内部项目之间，不污染子元素的盒模型。
适用场景：Flex 布局（需 display: flex + flex-wrap: wrap）或 Grid 布局（display: grid）；不适用于纯块级流式布局。
-
gap在 Flex 中是实验性支持，但现代浏览器（Chrome 104+、Firefox 103+、Safari 16.4+）已稳定可用；旧版 Safari 需用row-gap和column-gap拆开写 - 设
gap: 1rem后，所有相邻项目间自动留出统一空隙，不用再给每个子项写margin-right或margin-bottom - 如果子项本身有
margin，gap不会叠加冲突，它独立于 margin，逻辑更干净
place-items: center 一行居中，别再套三层 div
想让内容在视口里垂直水平居中？别写 display: flex + justify-content + align-items 三行，也别用 position: absolute 配 transform。对根容器或全屏区块，直接上 place-items: center 更直白。
注意：place-items 是 justify-items 和 align-items 的简写，只对 Grid 和 Flex 容器生效；它控制的是“容器内所有子项”的对齐方式，不是单个子项。
立即学习“前端免费学习笔记（深入）”；
- 必须确保父容器有明确尺寸（比如
min-height: 100vh），否则place-items没参考系 - 如果子项是
inline元素（如<span></span>），先得设display: block或display: inline-block，否则居中无效 - 和
text-align: center不同，place-items居中的是整个盒，包括 padding 和 border，更可控
用 clamp() 替代媒体查询做流体字号
极简设计最怕一堆 @media 套餐式断点。现在主流浏览器都支持 clamp()，一条声明就能让字体在最小值、首选值、最大值之间平滑缩放，空余空间分配立刻变聪明。
典型写法：font-size: clamp(1rem, 2.5vw, 1.5rem)——屏幕窄时用 1rem，宽到一定程度后按视口宽度 2.5% 缩放，但不超过 1.5rem。
- 中间值建议用
vw或svw，避免用em或rem，否则会嵌套放大 - 不要把上下限设得太近（比如
clamp(1.2rem, 1.25rem, 1.3rem)），失去响应意义，还可能触发渲染抖动 - 在按钮、标题等需要视觉层级的地方单独用
clamp()，别一股脑全塞进:root变量里，容易失控
aspect-ratio 固定卡片比例，空余空间自动拉伸不溢出
做响应式卡片时，图片变形、文字换行错位、高度塌陷……根本原因是没约束内在比例。CSS aspect-ratio 能让容器自己守规矩，不用 JS 算高，也不靠 padding-top 假高度 hack。
写法简单：aspect-ratio: 16 / 9 或 aspect-ratio: 1（正方形）。它只管宽高比，不管具体尺寸，剩余空间怎么分，交给 flex 或 grid 去算。
- IE 完全不支持，Edge 101+ 开始支持；如需兼容，可用
@supports (aspect-ratio: 1)包一层降级样式 - 和
object-fit: cover搭配用效果最好：图片保持比例裁剪，容器保持比例撑开，文字自然浮动其上 - 慎用于含大量文本的容器——
aspect-ratio会强制固定高度，文字多时可能被截断，优先用在图文混合且图为主的位置
空余空间不是留白，是呼吸感的计量单位。把 gap、place-items、clamp()、aspect-ratio 当作刻度尺，而不是装饰开关，才能让“极简”真正落在布局逻辑里，而不是只浮在视觉表面。
