CSS布局大全（转载）（精华）

 原文地址：https://juejin.im/post/5aa252ac518825558001d5de

 

内容目录 

一、水平居中
(1)文本/行内元素/行内块级元素▲
(2)单个块级元素▲
(3)多个块级元素
(4)使用绝对定位实现▲
(5)任意个元素(flex)
★本章小结：

二、垂直居中
(1)单行文本/行内元素/行内块级元素▲
(2)多行文本/行内元素/行内块级元素
(3)图片▲
(4)单个块级元素
--(1) 使用tabel-cell实现:
--(2) 使用绝对定位实现:▲
--(3) 使用flex实现:
(5)任意个元素(flex)
★本章小结：

三、水平垂直居中
(1)行内/行内块级/图片▲
(2)table-cell
(3)button作为父元素
(4)绝对定位▲
(5)绝对居中▲
(6)flex
(7)视窗居中
★本章小结：

四、两列布局
4.1 左列定宽,右列自适应
--(1)利用float+margin实现
--(2)利用float+margin(fix)实现
--(3)使用float+overflow实现▲
--(4)使用table实现▲
--(5)使用绝对定位实现
--(6)使用flex实现
--(7)使用Grid实现
4.2 左列自适应,右列定宽
--(1)使用float+margin实现
--(2)使用float+overflow实现▲
--(3)使用table实现▲
--(4)使用绝对定位实现
--(5)使用flex实现
--(6)使用Grid实现
4.3 一列不定,一列自适应
--(1)使用float+overflow实现▲
--(2)使用flex实现
--(3)使用Grid实现

五、三列布局
5.1 两列定宽,一列自适应
--(1)使用float+margin实现
--(2)使用float+overflow实现▲
--(3)使用table实现▲
--(4)使用flex实现
--(5)使用Grid实现
5.2 两侧定宽,中间自适应
5.2.1 双飞翼布局方法
5.2.2 圣杯布局方法
5.2.3 使用Grid实现
5.2.4 其他方法
--(1)使用table实现▲
--(2)使用flex实现
--(3)使用position实现▲

六、多列布局
6.1 等宽布局
6.1.1四列等宽
--(1)使用float实现▲
--(2)使用table实现▲
--(3)使用flex实现
6.1.2多列等宽
--(1)使用float实现▲
--(2)使用table实现▲
--(3)使用flex实现
--(4)使用Grid实现
6.2 九宫格布局
--(1)使用table实现▲
--(2)使用flex实现
--(3)使用Grid实现
6.3 栅格系统▲
--(1)用Less生成

七、全屏布局
(1)使用绝对定位实现▲
(2)使用flex实现
(3)使用Grid实现

八、网站实例布局分析：
8.1 小米官网
8.1.1 兼容IE9+的方法
--(1)页面整体
--(2)局部——header
--(3)局部——top
--(4)局部——center
--(5)局部——bottom
--(6)局部——footer
--(7)全部代码(优化后)
8.1.2 Flexbox+Grid搭配用法(未来...)

九、其他补充：
9.1 移动端viewport
--设置viewport：
--阅读推荐：
9.2 媒体查询
--代码示例：
--阅读推荐：
9.3 REM
--阅读推荐：
9.4 Flexbox
--阅读推荐：
9.5 CSS Grid
--阅读推荐：