写布局，左右各100px,中间自适应

1.position，margin布局
这里也分三种，绝对定位，圣杯布局，自身浮动
1）绝对定位：left、right：absolute；center自然流动+margin左右宽度

#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:10px;}  
#left{left:0px;}  
#right{right: 0px;}  
#center{margin:10px 210px ;background-color: #eee;height: 200px; }  
<div id = "left">我是左边</div>  
<div id = "right">我是右边</div>  
<div id = "center">我是中间</div>  

缺点：两边和中间的值有可能不对齐，注意top值，必要时添加初始化元素，另外随着窗口缩小，小于200px,会发生压缩；

2).使用自身浮动法：左右分别float：left,right，center自然流动+margin左右宽度

#left{float: left;width:200px;height:200px;background:blue;}  
#right{float: right;width:200px;height:200px;background:#f60;}  
#center{margin: 0 210px;height: 200px; background:red;}  

center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，当浏览器窗口很小的时候，右边元素会被击倒下一行

3).圣杯布局
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC（块级格式化上下文），并设置宽度，并且这个宽度要和left块的margin负值进行配合。

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
#left_margin {margin-left: -100%; background-color: lightpink}  
#right_margin{margin-left: -200px;} 
<div id = "wrap">  
	<div id = "center"></div>  
</div>  
<div id = "left_margin"></div>  
<div id = "right_margin"></div>

优点是三栏相互关联，有一定的抗性。对于left快的margin负值一定要等于wrap的宽度。

2.css新特性
在外围包裹一层div，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。

#box{width:100%;display: flex; height: 100px;margin: 10px;}  
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}  
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}  
<div id = "box">  
	<div id = "left_box"></div>  
	<div id = "center_box"></div>  
	<div id = "right_box"></div>  
</div>  

注意center一定要放中间

参考引用：https://blog.csdn.net/cinderella_hou/article/details/52156333