HTML负责搭建文档骨架，CSS则控制这些骨架在屏幕上的位置、间距、对齐方式和换行行为。无论页面内容多丰富，如果缺少合理的排版规则，文字和图片就会挤在一起，信息层级也会变得混乱。掌握CSS布局的关键，是理解文档流、盒模型以及现代布局工具之间的配合关系。下面这张示意图展示了典型的页面布局结构，头部、主内容区和底部需要不同的排列策略。
先理解文档流与盒模型
HTML元素默认按照文档流排列。块级元素如 <div>、<p>、<section> 会占满父容器的整行，上下依次堆叠；行内元素如 <span>、<a> 则跟随文本在同一行内流动。这个默认行为是所有布局的起点。很多看似奇怪的错位问题，根源都在于忽略了文档流对元素排列的约束。例如两个相邻块级元素之间出现空白，往往不是代码写错，而是外边距合并导致。
盒模型决定了每个元素占据的实际空间。标准盒模型下，width 只包含内容区，内边距和边框会额外增加元素尺寸；而使用 box-sizing: border-box 后，width 会包含内容、内边距和边框，布局计算更加直观。建议在项目初始化时统一设置：
* {
box-sizing: border-box;
}
定位机制则用来打破默认的文档流。相对定位 position: relative 保留原位置并允许偏移，绝对定位 position: absolute 脱离文档流并相对于最近的定位祖先定位，固定定位 position: fixed 基于视口定位，而粘性定位 position: sticky 在滚动到阈值前保持相对定位，之后切换为固定定位。粘性定位非常适合做吸顶导航：
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
理解文档流与盒模型之后，再去使用浮动或定位就不会盲目。尤其是旧项目里常见的 float 布局，虽然仍能工作，但需要额外清除浮动，维护成本高。现代CSS布局优先考虑下面两个工具。
用Flex与Grid构建弹性布局
Flexbox解决一维排列问题。它让容器内的子元素沿主轴或交叉轴灵活分配空间，特别适合导航栏、按钮组、列表项等单行或单列布局。通过 display: flex 激活后，可以使用 justify-content 控制主轴对齐，align-items 控制交叉轴对齐，gap 设置子元素间距。例如一个典型的顶部导航：
.nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.nav a {
padding: 8px 12px;
text-decoration: none;
}
Grid则解决二维布局问题。它允许同时定义行和列，适合整体页面框架、卡片网格、仪表盘等需要行和列同时控制的场景。使用 grid-template-columns 可以精准指定列宽，repeat 和 minmax 函数能创建响应式网格。例如卡片列表：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 24px;
}
这段代码的含义是：每列最小宽度260像素，如果容器空间足够则自动填充更多列，剩余空间由 1fr 等比例分配。相比Flexbox，Grid在处理行与列交叉约束时更加直观，不需要额外包裹层或计算宽度。实际项目中，Flex与Grid可以混合使用，例如页面整体用Grid布局，局部导航或按钮组用Flex对齐，既保持结构清晰，又发挥各自优势。
响应式排版与常见细节优化
响应式布局的目标是让同一套HTML在不同屏幕尺寸下都能正常阅读。媒体查询是基础工具，移动优先的策略是先写移动端样式，再通过 @media 在更大断点处增强布局。这样能减少移动设备加载无用规则，也更符合渐进增强原则。同时字号单位建议使用 rem 而不是固定像素，因为 rem 相对于根元素字号，用户可以调整浏览器字体大小，页面文字会同步缩放。
细节优化往往比大块布局更影响体验。行高一般设置为1.5到1.8之间，正文容器最大宽度控制在60至80个字符左右，避免阅读时视线来回扫动。图片需要设置 max-width: 100% 和 height: auto，防止撑破容器。使用 calc 函数可以混合单位计算，比如 width: calc(100% - 32px) 让内容与容器保持固定边距。下面的样式演示了移动端响应式调整：
html {
font-size: 16px;
}
.content {
display: grid;
grid-template-columns: 1fr;
padding: 16px;
}
img {
max-width: 100%;
height: auto;
}
@media (min-width: 768px) {
.content {
grid-template-columns: 2fr 1fr;
gap: 24px;
padding: 24px;
}
}
@media (min-width: 1024px) {
html {
font-size: 17px;
}
.content {
padding: 32px;
}
}
响应式排版不是简单地缩小字号或堆叠元素，而是根据可用空间重新组织信息层级。移动端优先隐藏次要内容，桌面端再展开侧边栏或辅助信息，可以明显提升浏览效率。另一个常见误区是过度依赖固定宽度，例如给容器设置 width: 1000px，窄屏必然出现横向滚动条。使用相对单位、minmax、auto-fit 等现代CSS特性，才能让布局真正具备弹性。
掌握文档流、盒模型、Flex、Grid以及响应式断点，基本可以覆盖大多数HTML页面排版需求。布局不是靠试错堆出来的，而是基于内容结构选择合适工具，再通过细节调整达到清晰、稳定的视觉效果。