CSS布局解决方案(终结版)

2018-03-20  本文已影响33人  HelloJames

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。

居中布局

水平居中

1)使用inline-block+text-align

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

2)使用table+margin

(1)原理、用法

(2)代码实例

image.png

(3)优缺点:

3)使用absolute+transform

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

4)使用flex+margin

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

5)使用flex+justify-content

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

垂直居中

1)使用table-cell+vertical-align

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

2)使用absolute+transform

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

3)使用flex+align-items

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

水平垂直居中

1)使用absolute+transform

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

2)使用inline-block+text-align+table-cell+vertical-align

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

3)使用flex+justify-content+align-items

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

多列布局

定宽+自适应

1)使用float+overflow

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

2)使用float+margin

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

3)使用float+margin(改良版)

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

4)使用table

(1)原理、用法

(2)代码实例

image.png

5)使用flex

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

两列定宽+一列自适应

(1)原理、用法

(2)代码实例

image.png
不定宽+自适应

1)使用float+overflow

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

2)使用table

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

3)使用flex

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

两列不定宽+一列自适应

(1)原理、用法

(2)代码实例

image.png
等分布局
image.png

公式转化:

l=w*n+g*(n-1)->l=w*n+g*n-g->l+g=(w+g)*n

image.png

因此,我们需要解决两个问题:

1)使用float

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

2)使用table

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

3)使用flex

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

定宽+自适应+两块高度一样高

1)使用float

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

2)使用table

(1)原理、用法

(2)代码实例

image.png

3)使用flex(1)原理、用法

(2)代码实例

image.png

(3)优缺点

4)使用display

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

全屏布局

全屏布局的特点
全屏布局的方法
image.png

1)使用position

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

2)使用flex

(1)原理、用法

(2)代码实例

image.png

(3)优缺点

image.png
全屏布局相关方案的兼容性、性能和自适应一览表
方案 兼容性 性能 是否自适应
Position 部分自适应
Flex 较差 可自适应
Grid 较好 可自适应

(转发)作者:无悔铭 https://segmentfault.com/a/1190000013565024

上一篇 下一篇

猜你喜欢

热点阅读