三列布局

本篇讲三列布局，面试常考题，自己总结的，如有什么问题，欢迎指出！我会用红色标注出主要作用部分，都是最精简的写法，，没有多余的修饰。

布局方式一:两边固定中间自适应

1.flex布局

思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局(如果对flex不了解，可点击打开链接学习)

#box{

width:100%;

height:100px;

display:flex;

margin:10px;

}

#left,#right{

width:200px;

height:100px;

margin:10px;

background-color:#999;

}

#center{

flex:1;

height:100px;

margin:10px;/*左右margin不会叠加*/

background-color:#f00;

}

2.利用浮动(float)

让左右元素浮动，缺点是中间元素必须置于二者之后，不然right元素会进入下一行

.left,.right{

width:200px;

height:200px;

background-color:#999;

}

.left{

float:left;

}

.right{

float:right;

}

.center{

margin:0 200px;

height:300px;

background-color:#f00;

}

3.利用绝对定位(position)

center居中并利用margin为左右两边留出位置，左右绝对定位

css三列布局

/*左右固定，中间自适应 利用绝对定位*/

.container{

width: 100%;

height: 100%;

position: relative;

}

.left{

position: absolute;

left: 0;

top: 0;

width: 400px;

height: 200px;

background-color: black;

color:#fff;

}

.center{

/*width: auto;*/ /*如果没有这一句，那么，center这个div的文字就不会自动换行*/

margin: 0 400px;

height: 400px;

background-color: yellow;

}

.right{

position: absolute;

top: 0;

right: 0;

width: 400px;

height: 300px;

background-color: red;

}

4.对中间的宽度进行calc计算

三个元素都向左浮动，左右定宽，中间的对其进行计算，让100%宽度减去左右宽度，即为中间宽度。

.container{

overflow: hidden;

}

.left,.right{

float: left;

width: 100px;

background:red;

}

.center{

float: left;

width:calc(100% - 200px);

background:yellow;

}

5.双飞翼布局(重点来了)

目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的(谁先构建好谁先显示)，故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。

body {min-width: 550px;}

.col {float: left;}

#main {

width: 100%;

height: 200px;

background-color: #ccc;

}

#main-wrap {

margin: 0 190px;/*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding*/

}

#left,#right {

width: 190px;

height: 200px;

background-color: #0000FF;

}

#left{

margin-left: -100%;

}

#right {

margin-left: -190px;

background-color: #FF0000;

}

这种布局的好处是：两边(left和right)不会盖住中间(center)部分，left和right盖住的是wrap元素的两边，即main-wrap的margin部分。

6.圣杯布局(也是重点)

优先渲染主要部分,此部分参考了木羽zwwill

.wrapper {

padding: 0 100px;

overflow:hidden;

}

.col {

position: relative;

float: left;

}

.main {

width: 100%;

height: 200px;

background:yellow;

}

.left,.right {

width: 100px;

height: 200px;

background:red;

}

.left{

margin-left: -100%;

left: -100px;

}

.right {

margin-left: -100px;

right: -100px;

}

main

left

right

圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。

圣杯布局和双飞翼的区别：(按我自己理解)

圣杯布局是整体使用了一个container(上例的wrapper)，将三列放入其中，left和right占据的是wrapper的padding-left和 padding-right(上例第八行padding:0 100px;)。

双飞翼布局是在center部分多加了一个节点元素，left和right部分的位置在main-wrap的margin(magin-left和margin-right)部分。

布局方式二:两边自适应中间固定

1.css3布局

目前没有浏览器支持 box-flex 属性。Firefox 支持替代的 -moz-box-flex 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

box-flex 属性规定框的子元素是否可伸缩其尺寸。提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

div[class=me] {

display: -webkit-box;

}

div div {

background: red;

height: 100px;

}

div div:nth-child(1) {

-webkit-box-flex:1;

}

div div:nth-child(2) {

width: 800px;

background: #ccc;

}

div div:nth-child(3) {

-webkit-box-flex:1;

}

2.flex布局

*{

margin:0;

padding:0;

}

.wrap{

display:flex;

flex-direction:row;

margin-top:20px;

}

.center{

width:800px;

text-align:center;

background:#ccc;

}

.left,.right{

/*flex-grow 属性用于设置或检索弹性盒的扩展比率。*/

flex-grow: 1;

line-height: 30px;

background:red;

}

利用flex-grow进行布局，详见flex-grow属性

3.左右利用calc()函数计算

#container{

height:200px;

width: 100%;

}

#left,#right{

float:left;

background-color:#ccc;

height:100%;

width: calc(50% - 500px);

}

#center{

float:left;

background-color:yellow;

height:100%;

width:1000px;

}

两边自适应中间固定暂时整理到这三种方法。