自适应布局

请你说一说你知道的所有web布局方式？

1.浮动　

　　float:left|right

2. inline-block   

　　display:inline-block(行内块级)

3.flexible box(弹性盒子)

　　display:flex

4.grid

　　display:grid

5.绝对、相对布局

　　position:absolute/relative

6.表格

　　display:table

7.使用布局框架--bootstrap.css

本文的所有例子使用了同一种三栏布局。

大尺寸：width>1024px

中尺寸：768px<width<1024px

小尺寸：width<768px

1.浮动布局，最常见的布局之一

普通的html布局，一个header，一个footer,中间是三栏布局，关键的css代码，三栏布局添加浮动，清除浮动，元素的宽度都是百分比，日常应用是多用auto，让里面的内容撑起高度

用@media查询，当@media的查询条件满足时，应用{}中的样式，screen就是指电脑屏幕。

2.inline-block   display:inline-block

html和浮动布局都是一样的，为了避免空白符号压缩的问题，写法略有变化。

只是把float:left改为了这两句，其他的不变，没有推荐，看个人习惯。

3.flexible box (弹性盒子)

display:flex;设置在容器上。

先介绍下display:flex的用法：

本例中只改变就行

 

4. display:grid 网格布局，不常用。

5.position:absolute/relative 常用。

6.使用bootstrap.css框架。

tips:

1.尽量不使用固定高度、宽度，使用百分比，auto，calc()

2.viewport: