web布局方式

时间:2018-11-16
本文章向大家介绍web布局方式,需要的朋友可以参考一下

请你说一说你知道的所有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: