问css 网页布局方式 主流布局方案详解

css 网页布局就是通过 CSS 控制 HTML 元素的排列、对齐、宽高、浮动与定位，实现页面排版，从早期传统布局到现代主流布局，一共分为传统布局、Flex 弹性布局、Grid 网格布局这三大类，面试和实际项目最核心重点是 Flex 和 Grid，也是现在前端开发首选，传统布局包含普通文档流、浮动、定位，属于基础原理，很多新手只学新布局，不理解文档流，后续写 css 网页布局很容易出现元素错位、塌陷问题，css 网页布局核心思想就是控制元素是否脱离默认文档流，默认文档流是块级元素独占一行，行内元素横向排列，浮动和绝对定位会让元素脱离文档流，从而实现横向并排效果，现代 Flex、Grid 不需要脱离文档流，解决浮动清除浮动、定位层级复杂的痛点，响应式页面一般会搭配媒体查询，结合 css 网页布局实现手机端适配。

主流 css 网页布局分类

重点布局详细讲解

1 浮动布局

float:left 或者 float:right，元素脱离文档流，实现横向并排，最大缺陷就是父元素高度塌陷，需要 clearfix 伪元素清除浮动，现在新项目已经很少单独使用浮动做主布局，只保留图文环绕场景。

2 定位布局

• relative 相对定位：保留原来占位，相对自身原位置偏移
• absolute 绝对定位：脱离文档流，相对于最近已定位父元素定位
• fixed 固定定位：相对于浏览器视口，滚动页面位置不变，常用于顶部固定导航
• sticky 粘性定位：滚动到阈值之后固定，是 relative+fixed 结合效果

3 Flex 弹性布局（一维）

开启 display:flex，父容器是 flex 容器，子项变成 flex 项目，核心属性：

justify-content 主轴对齐

align-items 交叉轴对齐

flex-grow 剩余空间分配

flex-shrink 收缩比例

flex-basis 基准宽度

优势：轻松实现水平垂直居中，自适应伸缩，移动端非常常用

4 Grid 网格布局（二维）

display:grid，可以同时定义行和列，grid-template-columns、grid-template-rows，适合复杂二维排版，可以精准划分网格区域，适合整个页面头部、侧边栏、主内容、底部这种经典页面框架，是现在和 Flex 并列的现代 css 网页布局方案。

补充深度要点

实际项目经常 Flex+Grid 混合使用，Grid 负责整页大框架，内部小模块使用 Flex 排版。

响应式 css 网页布局，一般搭配 @media 媒体查询，在不同屏幕宽度下切换布局，比如桌面三栏，手机端变成单列堆叠。

盒模型是 css 网页布局基础，box-sizing:border-box 是项目常用设置，让宽高包含 padding 和 border，计算尺寸更方便。

【常见问题】

问题 1 css 网页布局现在优先选 Flex 还是 Grid

回答 1 css 网页布局一维横向排列优先 Flex，二维行列复杂排版优先 Grid，现代项目 css 网页布局经常 Flex 和 Grid 搭配使用。

问题 2 css 网页布局浮动为什么要清除浮动

回答 2 css 网页布局使用 float 浮动之后父元素高度塌陷，所以 css 网页布局浮动方案必须清除浮动，这也是老式 css 网页布局最大缺点。

问题 3 css 网页布局水平垂直居中用哪种方式最简单

回答 3 css 网页布局里面 Flex 实现水平垂直居中最简单，父元素 display:flex，搭配 justify-content 和 align-items，是最常用 css 网页布局居中方案。

问题 4 css 网页布局 sticky 定位是什么

回答 4 css 网页布局 sticky 属于定位类 css 网页布局，滚动到设定阈值之后元素固定，常用于侧边栏、表头固定这类 css 网页布局效果。

【免责申明】

本内容为 css 网页布局通用前端基础知识，CSS 新特性会随标准更新，部分旧浏览器对 Grid 等新 css 网页布局属性兼容性需要额外做降级处理。