css三列布局--两边固定中间自适应和中间固定两边自适应

三列布局

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

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

1.flex布局

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#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;}</style></head><body><div id="box"><div id="left">left</div><div id="center">center</div><div id="right">right</div></div></body>
</html>

2.利用浮动（float）

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

    <!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">.left,.right{width:200px;height:200px;background-color:#999;}.left{float:left;}.right{float:right;}.center{margin:0 200px;height:300px;background-color:#f00;}</style>  </head>  <body>  <!--该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是                和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。--><div class="left">left</div><div class="right">right</div><div class="center">center</div></body>  </html>

3.利用绝对定位（position）

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>css三列布局</title><style type="text/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;}</style></head><body><div class="container"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div></body>
</html>

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

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.container{overflow: hidden;}.left,.right{float: left;width: 100px;background:red;}.center{float: left; width:calc(100% - 200px);background:yellow;}</style></head><body><div class="container"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div></body>
</html>

5.双飞翼布局（重点来了）

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">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;}</style></head><body><div id="container"><div id="main" class="col"><div id="main-wrap"> #main </div></div><div id="left" class="col">#left</div><div id="right" class="col">#right</div></div></body>
</html>

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

6.圣杯布局（也是重点）

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css"> .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;}</style></head><body><section class="wrapper"><section class="col main">main</section><aside class="col left">left</aside><aside class="col right">right</aside></section></body>
</html>

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

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

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

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

<div id="main" class="col"><div id="main-wrap"> #main </div>
</div>

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

1.css3布局

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

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">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;}</style></head><body><div class="me"><div>left</div><div>center</div><div>right</div></div></body>
</html>

2.flex布局

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{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;}</style></head><body><div class="wrap"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div></body>
</html>

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

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#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;}</style></head><body><div id="container"><div id="left">left</div><div id="center">center</div><div id="right">right</div></div></body>
</html>

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