三列布局：两边定宽，中间自适应，充满整个屏幕

本文介绍了四种实现三列布局的方法：使用flex布局，绝对定位，自身浮动法以及圣杯布局。通过这些方法，可以创建一个两侧宽度固定，中间部分根据屏幕宽度自适应填充的页面布局。

一、使用flex布局

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	    html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	    }
	 </style>
    </head>
    <body>
	<div style="display: flex;width: 100%;height: 100%;">
	    <div style="width: 100px;background: blue;">好好学习</div>
	    <div style="background: red;width: auto;flex: 1;">好</div>
	    <div style="width: 100px;background: blue;">天天向上</div>
	</div>
    </body>
</html>

二、使用绝对定位方法

绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>layout_box</title>
	<style type="text/css">
	    html,body{ 
	        margin: 0px;
		width: 100%; 
		padding: 0;
		height: 100%;
	    }
	    #left,#right{
		width: 200px;
		height: 100%; 
		background-color: red;
		position: absolute;
	    }
	    #left{left:0px;}
	    #right{right: 0px;}
	    #center{margin:0px 200px;background-color: blue;height: 100%;}
	</style>
    </head>
    <body>
	<div style="width: 100%;height: 100%;">
	    <div id = "left">我是左边</div>
	    <div id = "right">我是右边</div>
	    <div id = "center">我是中间</div>
	</div>
    </body>
</html>

三、使用自身浮动法

自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

<style type="text/css">
    html,body{margin: 0px;width: 100%; padding: 0;height: 100%;}
    #left_self,#right_self{ width: 200px;background-color: #ffe6b8;height: 100%;}
    #left_self {float: left;}
    #right_self{float: right;}
    #center_self{margin: 0 200px;background-color: #a0b3d6;height: 100%;}
</style>

<div style="width: 100%;height: 100%;">
    <div id = "left_self">我是左边</div>
    <div id = "right_self">我是右边</div>
    <div id = "center_self">我是中间</div>
</div>

四、圣杯布局

圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。

<style type="text/css">
html,body{ margin: 0px;width: 100%; padding: 0;height: 100%;}
#wrap{ width: 100%;height: 100%; background-color: #fff;float: left;}
#wrap #center{ margin:0 200px; height: 100%;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100%;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink;}
#right_margin{margin-left: -200px;}
</style>

<div style="width: 100%;height: 100%;">
    <div id = "wrap">
        <div id = "center"></div>
    </div>
    <div id = "left_margin"></div>
    <div id = "right_margin"></div>
</div>