页面经典布局（中间固定，两边自适应）

1.float布局（流体布局）

原理：

左右浮动，中间center盒子设置左右margin，宽度自适应，布局时，center要放在right之后

HTML布局

CSS样式

注意

适用PC端，但主要内容无法最先加载，当页面内容较多时，会影响用户体验。

 

2 BFC规则布局

原理：

BFC不会与浮动元素重叠

HTML布局

CSS样式

注意

与浮动布局一致，适用PC端，但主要内容无法最先加载，当页面内容较多时，会影响用户体验。只是解决了BFC(块格式化上下文)问题。

 

3 绝对定位布局

原理：

左右两边使用absolute定位，中间center盒子设置左右margin,要处理好top值，否则元素会掉到下一行

HTML

CSS

注意

主要内容可以优先加载，但脱离了文档流，注意清除浮动问题。

 

4 margin负值法 

1）圣杯布局（相对布局）

原理：

先给三个盒子的父级盒子设置padding-left和padding-right，使左右两边留有左右盒子宽度的空白区域，再将三个盒子同时设置左浮动float:left,并使中间盒子宽度100%,这样中间盒子独占一行显示，接着设置左右盒子的margin-left，让三个盒子并排显示，会遮住中间盒子的左右两边的一部分内容，最后左右盒子使用相对定位position: relative并分别配合right和left属性,将盒子定位到左右两边留白的位置。中间center盒子放在最前面。

HTML

CSS

注意

适用移动端，主体内容优先加载，结构简单，样式复杂

2）双飞翼布局

原理：

在中间盒子外包裹一个div，接着将三个盒子一起float左浮动，中间盒子设置为100%，中间盒子独占一行，左右盒子分别设置自己的固定宽度，再设置左右盒子的margin-left，让三个盒子同一行显示，左盒子的margin-left的值和center外层包裹盒子的宽度相等，由于中间盒子包裹了一个div，并且设置了左右的padding值，与左右盒子的宽度一致，这样中间center盒子就不会被遮挡，就不用再使用定位解决，中间center盒子放在最前面。

HTML

CSS

注意

适用移动端，主体内容优先加载，结构复杂，样式简单

圣杯布局和双飞翼布局的总结：

相同点

解决思路都是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同点

双飞翼布局比圣杯布局多创建一个div，多了1个div，少用4个css属性，因为不用再相对布局。（双飞翼布局给中间盒子设置了左右间距，这样左右盒子上来后，就会紧贴着中间盒子的外层大盒子，这样就不会遮挡住中间盒子，圣杯布局一开始将左右间距设置给整个大容器，中间盒子100%，左右盒子上来后，就会遮挡中间盒子的内容，需要使用相对定位解决这个问题）

 

5 CSS3新特性，弹性布局

原理：

外层包裹一个大盒子，设置display:flex,中间的盒子设置flex:1，左右两边盒子的宽度根据自己的需求定义，center盒子一定要放在中间

HTML

CSS

使用场景：

适用移动端，主体内容优先加载，但要考虑浏览器的兼容问题（IE8及以下浏览器不兼容）

 

6 table布局

原理：

将外层的大div设置display: table,设置宽度100%，设置需要的高度，三个盒子同时设置 display: table-cell，左右盒子设置宽度和颜色，中间center盒子设置颜色。

HTML

CSS

注意

适用PC端，兼容性好，但无法设置栏间距。

 

7 网格布局grid（HTML5新特性）

原理：

将外层的大div设置display: grid;,设置盒子高度grid-template-rows: 400px，设置左右两边间距grid-template-columns: 200px auto 100px;三个盒子设置各自的颜色就好，中间center盒子必须在中间。

HTML

CSS

注意：

适用移动端，兼容性不好，IE+10以上支持，而且只支持部分属性

 

参考博客：https://blog.csdn.net/lunhui1994_/article/details/78712496