CSS 布局解决的是元素如何占据空间、彼此如何排列。开始布局前，可以先判断内容是一维排列还是二维结构，以及它是否需要随容器宽度变化。明确关系之后，选择会简单很多。

普通流是布局的基础

没有特别定位时，块级盒子通常沿纵向依次排列，行内内容则在可用宽度内从一行流向下一行。页面主体、文章段落等天然适合普通流。内容增加时，后面的元素会自然向下移动，因此通常不需要为文本区域设置固定高度。

外边距控制盒子之间的距离，内边距控制内容与边框的距离。设置 box-sizing: border-box 后，声明的宽高会包含边框和内边距，尺寸计算往往更直观。

Flexbox 处理一维排列

弹性布局适合沿一个主要方向组织项目，例如导航、按钮组或需要垂直居中的区域。容器设置 display: flex 后，可以分别控制主轴和交叉轴上的对齐。

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

gap 用于项目之间的间隔；flex-wrap 允许空间不足时换行。主轴默认是水平方向，设置 flex-direction: column 后主轴会变成纵向，所以不能把“主轴”固定理解为水平方向。

Grid 处理二维结构

网格布局可以同时定义行和列，适合卡片列表、页面分栏和对齐关系明确的区域。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

这个示例会在空间允许时排列多个列，每列不小于指定宽度，并共同分配剩余空间。容器变窄后，项目会自动换到下一行，适合不依赖固定设备断点的响应式卡片区域。

定位用于有明确参照的叠放

position: absolute 会让元素脱离普通流，并相对于最近的已定位祖先元素确定位置。它适合角标、局部装饰等叠放效果，不适合承担主要文档布局。固定定位 fixed 通常相对于视口，使用时要避免遮挡正文或键盘焦点。

选择布局的简单判断

响应式布局的核心不是为每种屏幕写一套页面，而是允许内容在约束内自然伸缩。尽量使用弹性尺寸、合理的最大宽度和内容驱动的换行，再用少量媒体查询处理确实需要改变的结构。