什么是布局

简单来说就是HTML页面的整体架构和骨架，类似于家里买的是个毛坯房去搞个装修。

布局是一种设计思想；主要就是用CSS去实现,

几种常用的布局

table布局

采用div盒子模型 。传统用得比较多。多列显示、 display：table（父容器） 左右的display：table-cell（子容器），现在基本不怎么用了！

float布局

核心在于css 属性 float：left

特点：

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

对自身的影响：形成“块”（BFC，具有BFC特性的元素可以看作是隔离了的独立容器。容器里面的元素不会在布局上影响到外面的元素）、位置尽量靠上、位置尽量靠左，无法满足会靠下

对兄弟的影响：上面贴非float元素 、旁边贴float元素、不影响其它块级元素位置、影响其它块级元素内部文本

对父级的影响： 从布局上”消失“,高度塌陷（可以通过overflow:hidden|clearfix）

这个就属于技巧性布局，相对入门不久的前端人员感觉有点难。相对门槛会高点。

inline-block布局

简单来说就是在CSS中通过display:inline-block对一个对象指定inline-block属性，可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。

inline-block在CSS中通过display：inline-block对一个对象制定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。

display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

适用于简单一点的布局，主流公司不用这个，只是给大家了解下。

需要注意的是：

低版本的ie浏览器（ie6 ie7）是不支持display:inline-block;所以理论上ie是不识别的，但是在 ie 内核下有个部分叫做 hasLayout，只要触发了它，这个元素就可以设置高宽从而使行级元素拥有了display:inline-block属性的表象。

column布局

这个相对简单，直接给属性加一个column属性 比如column 3 auto 分成3列。

flex布局

布局的传统解决方案，基于盒子模型，依赖display属性加position属性加float属性。它对于那些特殊布局非常不理想，比如：垂直居中

重要属性：flex-direction属性 flex-wrap属性 justify-content属性

弹性盒子盒子本来就是并列的制定宽度即可

Grid布局

网格布局（Grid）是最强大的CSS布局方案。它将网页划成一个个网格，做出各式各样的布局。Grid布局与flex布局有点像，都可以指定容器内部多个项目的位置。Flex布局是轴线布局，Grid则是将容器划分为”行“和”列“。

企业级页面布局套路

水平居中文本居中单个块级元素居中多个块级元素居中使用绝对定位使用transform是相对定位垂直居中方法居中布局圣杯布局

利用浮动和负边距的特性实现的两(三)栏布局。圣杯布局和双飞翼布局 是老的布局方式，2012年以前流行，现在已不流行，但是面试可能会考察到，所以记录一下

why it?

是三列布局，两边固定宽度，中间自适应中间内容元素在 dom 元素次序中优先位置

按照注释编号，一行行实现观察效果 范例

http://js.jirengu.com/poya/1/...

双飞翼布局

双飞翼布局 按照注释编号，一行行实现观察效果 范例

http://js.jirengu.com/fevifum...

解决了圣杯布局的缺点，多写了一个wrap。

全屏布局