css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局

1.表格布局（不推荐）

 

父级容器为display：table 表格

子级容器为display：table-cell 一个单元格

特点：在没有特别设置的情况下，子级是自动平分宽度并填满父级的。

table布局的优缺点：

缺点

1.table所占的字节比起其他的html标签来说更多，并且占用服务器资源更多，下载更慢。

2.table布局一旦形成，后期就很难用css改变。

3.阻挡浏览器渲染引擎的渲染顺序，延迟页面生成速度。

4.不利于搜索引擎抓取信息，影响网站排名。

优点：

兼容性高

简单

float布局

 使元素浮动，脱离了文档流但不脱离文本流 

补充：文档流 英文为normal flow 不知道为什么被翻译成文档。。。 脱离文档流的意思为不遵循原先的从左到右从上到下的规则，不脱离文本流的意思是文本依然会环绕在这个浮动的周围。

通俗一点可以理解为float完成的就是图文环绕的效果 

对自身来说，float可以形成块。也就是可以对一些行内元素进行宽高之类的处理。

但是float布局不够灵活，且会脱离文档流

       其他两个就省略了，重点解析一下

flexbox布局

传统布局                                                  flex弹性布局

兼容性高                                                  操作方便，布局简单，应用广泛

布局繁琐                                                   PC端支持较差

局限，不能很好的在移动端布局              IE11或更低版本不支持或部分支持

任何一个容器都可以指定为flex布局

当父级为flex布局时，子元素的浮动属性就失效了，flex是目前最好的布局。

flex容器

给父级做flex属性，控制的是flex-item的位置和排列。

父级主要的几个属性：

flex-direction：

flex里：主轴和侧轴 其实就是 x和y轴  元素根据主轴来排列 主轴可以设为y或x

flex-direction:row;flex-direction:column;

例： .contain{

          display: flex;

          flex-direction: column;

       }

justify-content：

设置在主轴上的排列方式

例： justify-content: space-between;

flex-wrap：设置子元素换行。

因为默认情况是不换行的，都在主轴排列

 例：flex-wrap: wrap;

align-items：

设置水平垂直居中 center

设置高度拉升，去掉子项的高度。 stretch

align-content：

侧轴上可控制对齐方式，当有换行之后才有效。

flex-wrap: wrap;  align-content:space-between; 上下沿贴着。

总结：单行找align-items，多行找align-content

flex-flow ：flex-diretion和flex-wrap的符合属性。

例：flex-flow：row，wrap x为主轴，自动换行。

子项常见属性

1.flex属性，可用来表示占多少份

直接flex：数字 数字代表占的份数

2.align-self属性，控制子项在侧轴的排列方式

例：align-self：flex-end

3.order属性 

例：order：-1 为向前提一个位置。