构建一个网页布局框架，首先要解决的不是视觉风格，而是结构关系。页面中的导航、侧栏、内容区和页脚并不是孤立存在，它们需要在一个统一的盒模型和定位规则下协同工作。只有当基础容器、间距和排列方式被预先定义好，后续添加组件时才不会因为一个局部的 padding 或 margin 破坏整体。下面从全局盒模型开始，逐步组装一个可以复用的 CSS 布局框架。
一、基础容器与全局盒模型
通常浏览器默认的盒模型会让宽度计算变得脆弱：给一个宽度 100% 的元素添加 padding 后，实际占用宽度会超过视口，从而产生水平滚动。解决方式是在样式表开头使用通配选择器将 box-sizing 设置为 border-box。这样元素的 width 包含 padding 和 border，布局更直观。全局重置还应包含 margin 清零、图片最大宽度限制和表单元素字体继承，避免不同浏览器默认样式干扰。
布局框架需要一个主容器来限制内容宽度并保持居中。可以用 .container 类设置最大宽度，再配合左右自动外边距。对于全宽区块，则使用 .container-fluid 或直接省略容器。代码示例如下：
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #222;
background: #f7f8fa;
}
img {
max-width: 100%;
display: block;
}
.container {
width: min(100% - 2rem, 1140px);
margin-inline: auto;
}
.container-fluid {
width: 100%;
padding-inline: 1rem;
}
width: min(100% - 2rem, 1140px) 使用 CSS 的 min() 函数，让容器在窄屏时自动留出 1rem 左右边距，在宽屏时限制最大宽度，比传统媒体查询更简洁。如果项目需要兼容较旧浏览器，可以退化为两段式写法，先设置宽度，再用媒体查询覆盖。盒模型之外，还应当提前定义基准间距变量，这样在不同区块之间保持一致的节奏感，而不是散落各处的手写数值。
二、Grid 负责页面骨架，Flexbox 处理局部排列
要搭建全面布局框架，不能只依赖一种布局方案。Grid 适合二维结构，能同时控制行和列；Flexbox 则更适合一维排列，例如导航项或卡片内的操作按钮。先定义整体页面结构：页头、主体区域、侧栏、页脚。主体区域可以是一个三列网格，中间主内容占弹性空间。
<header class="site-header">...</header> <div class="page-grid"> <aside class="sidebar">...</aside> <main class="main-content">...</main> <aside class="right-rail">...</aside> </div> <footer class="site-footer">...</footer>
.site-header,
.site-footer {
padding: 1rem 0;
background: #1f2937;
color: #fff;
}
.page-grid {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 260px;
gap: 1.5rem;
align-items: start;
padding-block: 2rem;
}
.sidebar,
.right-rail {
position: sticky;
top: 1rem;
}
.main-content {
min-width: 0;
}
这里 minmax(0, 1fr) 是关键，它允许中间列在内容过宽时正确收缩，否则 grid item 默认的 min-content 大小可能撑破布局。侧栏使用 sticky 定位可以在页面滚动时保持可见，如果侧栏内容较短，也可以去掉。Flexbox 则用来处理导航项和卡片内部元素：
.nav-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
list-style: none;
}
.card-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.75rem;
}
这种组合方式比当年用浮动实现多栏结构更可靠，也不需要用清除浮动来修补高度塌陷。Grid 和 Flexbox 的职责分开后，页面骨架和局部排列可以独立调整，降低后续改版成本。
三、响应式断点与容器查询
响应式不只是加几个媒体查询。一个稳定框架需要先确定断点策略：什么时候三栏变两栏，什么时候侧栏堆叠到主内容下方。常见做法是以内容可读性为依据，而不是固定设备宽度。比如当视口低于 1024px 时，将右侧栏放到下一行或隐藏；低于 768px 时，将页头导航折叠，主体变为单列。
@media (max-width: 1024px) {
.page-grid {
grid-template-columns: 200px minmax(0, 1fr);
}
.right-rail {
grid-column: 1 / -1;
position: static;
}
}
@media (max-width: 768px) {
.page-grid {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
}
}
在 1024px 时，右侧栏跨到整行下方，避免挤出过窄的主内容。在 768px 以下，所有区域变为单列，侧栏不再 sticky，移动端阅读体验更自然。但只靠视口断点不够，某些组件尺寸变化与视口无关。容器查询可以根据父容器宽度调整样式。例如卡片组件放在宽窄不同的列中，希望其内部标题字号或按钮排列变化：
.card-container {
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@container (max-width: 320px) {
.card {
flex-direction: row;
}
}
当卡片容器宽度不超过 320px 时，卡片内容横向排列。容器查询需要现代浏览器支持，在框架中可以渐进增强。合理搭配媒体查询和容器查询，可以让整体布局和局部组件各自按照合适的条件响应变化，避免所有样式都绑定在视口宽度上。
四、用自定义属性固化设计令牌
全面布局框架如果没有统一的设计令牌，每次调整颜色或间距都要全局搜索替换。CSS 自定义属性可以把颜色、字体、间距、圆角、阴影等抽象为变量。在 :root 中定义，组件中消费。这样主题切换只需改变量值，不需要修改每个组件的样式。
:root {
--color-primary: #2563eb;
--color-text: #1f2937;
--color-bg: #f7f8fa;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--radius: 8px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.card {
background: #fff;
padding: var(--space-lg);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
间距体系使用统一的 md、lg 等层级，避免散落的 13px、17px。在布局框架中，这些变量还应在组件类中重复使用，比如容器 padding、网格 gap、按钮尺寸。深色模式可以增加 [data-theme="dark"] 选择器覆盖变量，而不用重写组件样式。
此外可以创建少量高价值工具类，如 .mt-md、.flex、.grid，但要避免过度抽象。框架应提供稳定且可读的基础类，而不是堆砌大量原子类导致 HTML 难以维护。把结构布局、响应式规则和设计令牌分开管理，最终得到的就是一个能直接用于中小型项目的全面 CSS 布局框架。