常见的五种前端页面布局（table布局、float布局、absolute布局、flex布局、grid布局）

table布局-表格

1、table布局：

父级容器 display: table；
子级容器 display:table-cell；
(1)、空间平均划分：子级容器默认是自动平分宽度沾满父级容器；
(2)、设置其中一个table-cell为固定宽度：如果固定好其中一个子级容器，那么其余子级容器会自动平分宽度沾满父级容器；
(3)、设置每一个table-cell为固定宽度；
(4)、把此元素放置在父元素的中部,即垂直居中—>vertical-align:middle
(5)、等高对齐：
不对右侧的box设置display:table-cell，只对左侧，就会出现左侧跟随右侧高度变化而变化，如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。

2、table布局的优缺点：

缺点
(1)、table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。
(2)、table 会阻挡浏览器渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
(3)、灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。
(4)、不利于搜索引擎抓取信息，直接影响到网站的排名。
优点
(1)、兼容性好。
(2)、容易上手。

float布局-浮动

1、特点：非完全脱离文档流

(1)、元素"浮动"；
(2)、脱离文档流；
(3)、不脱离文本流；
说明：浮动的块元素会脱离正常的文档流，但是还会占用原有文档流的文本空间。

2、对自身的影响：形成“块”（BFC–块格式化上下文）

(1)、父级元素下含非float元素：
float元素宽度之和刚好等于父级元素宽度，所有子级元素宽度大于父级元素；浮动元素会随着浮动方向将非浮动元素顶到末尾，顶不出去了就最末尾的地方浮动在非浮动元素下方（类似于高度塌陷）。
(2)、父级元素下不含非float元素：
float元素宽度之和刚好等于父级元素宽度，正常按浮动方向浮动排序。
(3)、优缺点
缺点：脱离文档流，需要清楚浮动，高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在对高度计算的时候会忽略浮动的元素）。
优点：兼容性好，比较简单。

absolute布局-绝对定位

说明：参考css-position:absolute
(1)、优缺点
缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。
优点：很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。

flexbox布局-弹性盒子布局

CSS3弹性盒(Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局(基于一维)，即使他们的大小是未知或者是动态的，称为Flex；它是一种CSS快速布局方式，相比于传统文档流布局方式，具有简洁、高效和响应式、兼容强等优点。
说明：具体参考css-display:flex、阮一峰flex布局教程

grid布局-网格布局

网格布局（Grid）是最强大的CSS布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置；但是，它们也存在重大区别：Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
说明：具体参考css-display:grid、阮一峰grid布局教程