常见的网页布局类型有哪些：选型对照

常见的网页布局类型有哪些，主流包含固定布局、流式布局、弹性布局、网格布局、圣杯布局、双飞翼布局、瀑布流布局、分栏布局、全屏单页布局，固定布局适合PC端企业官网、后台管理页，页面宽度写死，缩放窗口不会改变内容排布；流式布局适配早期移动端，元素宽度用百分比，窗口变宽元素同步拉伸，容易出现文字拉宽变形；弹性布局依靠Flex规则快速分配空间，适合导航栏、卡片列表这类一维排布场景；网格布局适合二维规整排版，电商商品陈列、图文杂志页使用较多；圣杯布局和双飞翼布局都是三栏布局方案，中间主栏优先加载，侧边栏固定宽度，双飞翼布局在兼容旧浏览器时的错位问题更少；瀑布流布局以不等高卡片堆叠，适合图片素材站，加载新内容向下追加；分栏布局多用于资讯文章，阅读区和侧边导航分开；全屏单页布局多用于品牌宣传页，单屏承载一组信息，靠滚动切换板块，该分类边界只针对前端页面视觉排版，后台接口页面、纯弹窗页面不在这套选型范围。

网页布局类型的基础参数对比

圣杯布局和双飞翼布局都属于三栏布局，目标是左右侧边栏固定宽度，中间内容栏自适应，并且DOM结构上中间内容放在前面，优先渲染。圣杯布局依靠内边距和相对定位实现侧边栏归位，容器需要预留左右空间；双飞翼布局额外给中间内容嵌套一层子容器，用子容器的外边距避开侧边栏，在很多旧浏览器环境里，双飞翼布局不容易出现布局塌陷。你做内容站三栏结构时，优先选双飞翼，简化调试成本。

全屏单页布局也叫单页滚动布局，页面每一个区块高度等于屏幕视口高度，用户滚动一次切换一块内容。这类布局很少承载大篇幅文字，更适合品牌展示、活动落地页，页面交互会更有仪式感，文字信息量大的文章页面不建议采用，用户反复滚动查找内容的成本会升高。

分栏布局可以拆成两栏、三栏两种，侧边栏放置目录、推荐、标签，主栏承载正文。两栏布局是资讯站点最常用的方案，侧边栏宽度固定，主内容区域自适应，移动端一般会自动合并为单列，直接隐藏侧边模块。

选布局优先看页面信息维度。

一维横向排布，直接用弹性布局。二维整齐矩阵排布，优先网格布局。图片素材多、高度不统一，考虑瀑布流。只做PC端访问，内容版式不希望错乱，可以用固定布局。需要同时兼容电脑和手机，不能只依靠流式布局，最好搭配媒体查询，也就是响应式方案，响应式不是独立布局类型，是一套适配手段，可以叠加在弹性、网格布局之上使用。

W3C在CSS2.1规范中定义了常规文档流，所有网页布局都建立在文档流基础之上，浮动、定位、弹性、网格都属于脱离或者改写文档流的排版方式，你调试布局错乱问题时，可以先检查元素是否脱离文档流，这是高频出错点。

浮动布局现在已经很少用来做整页排版，早年大量用浮动实现多栏并排，浮动会让父容器高度塌陷，需要额外清除浮动代码，维护成本更高，新项目里浮动大多只用来实现文字环绕图片这类小效果。

响应式是适配策略，不是布局类型。