怎么样去布局网站的框架

打开任何一个网站，你最先感知到的布局不是颜色，也不是网站字体，而是样去空间分配。头部占多高、布局侧边栏多宽、网站内容区从哪开始、样去页脚什么时候出现——这些决策在用户滚动第一屏之前就已经定下了体验的布局基调。我见过太多项目，网站视觉稿漂亮得不行，样去一进开发就乱套，布局问题十有八九出在框架布局阶段。网站

先看一个具体的样去例子。去年我接手一个后台管理系统的布局重构，旧版用的网站是固定宽度 1200px 居中，左侧导航 200px，右侧内容区自适应。听起来没问题对吧？但实际用起来，在大屏上内容区被拉得过宽，表格每行要扫视半米远；在 1366px 的笔记本上又刚好卡在临界点，出现横向滚动条。这就是典型的框架没想清楚断点策略。

那具体怎么下手？我的习惯是先画三张图。第一张是区块图，把页面拆成 header、nav、main、aside、footer 这几个语义块，用方框标出它们的包含关系。第二张是断点图，标出在 320px、768px、1024px、1440px 这几个关键宽度下，哪些块会隐藏、堆叠或改变比例。第三张是溢出图，专门标注内容超出时是滚动、截断还是换行。

拿一个内容型网站来说，常见的框架选择是 max-width: 1200px; margin: 0 auto; 配合左右两栏。但这里有个坑：很多人直接写死像素值，结果在 4K 屏上两边留白巨大，在 iPad 竖屏上又挤成一团。更好的做法是用 minmax() 或者百分比加 max-width 组合。比如：

这段代码里 minmax(0, 1fr) 是关键。用 1fr 单独写，当内容里有长表格或 pre 标签时，网格会被撑破。加上 minmax(0, ...) 相当于告诉浏览器：这个轨道最小可以缩到零，别让内容绑架布局。

导航区域的处理更能看出一个人的布局功底。顶部固定导航现在几乎成了标配，但固定之后内容区要补 padding-top，这个值必须和导航实际高度一致。我见过用 position: sticky 结果父容器设了 overflow: hidden 直接失效的，也见过移动端下拉菜单展开后遮住整个屏幕却没法滚动的。这些都不是 CSS 写错了，是框架阶段没考虑交互状态。

侧边栏的宽度也值得琢磨。固定像素的 250px 看起来很稳，但如果里面放的是导航菜单，中文两个字和四个字混排时，固定宽度要么浪费空间要么频繁换行。用 fit-content 或者 max-content 让内容决定宽度，再配合 min-width 兜底，往往更舒服。

页脚是另一个重灾区。很多网站的页脚就是一堆链接堆在一起，没有任何分组逻辑。好的框架会把页脚当成一个独立的网格系统，通常三到四列，每列一个语义组，底部再放版权和备案信息。在移动端，这些列会折叠成手风琴或者直接纵向排列。如果你去看 Stripe 或 GitHub 的页脚，会发现他们的列宽和间距都遵循同一套比例，不是随手写的。

最后说一个容易被忽略的点：框架的层级关系。用 z-index 之前，先想清楚哪些元素需要脱离文档流。导航、弹窗、下拉菜单、悬浮按钮——这些元素的堆叠顺序应该在框架设计时就定好规则，而不是写到哪算哪。我的习惯是建一个简单的层级表：内容层 0，悬浮层 10，导航层 100，模态层 1000。这样后期加功能时不会出现“这个弹窗怎么被那个按钮盖住了”的尴尬。

布局框架没有标准答案，但有明显的优劣之分。好的框架让你在添加新页面时几乎不用写额外的定位代码，坏的框架让你每加一个模块就要调一次边距。判断方法很简单：把设计稿缩放到 50% 和 200%，如果结构依然清晰、没有元素错位或重叠，那这个框架就算立住了。