什么是布局

简单来说就是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。

• 全屏布局