一、两种布局的目的
使得左右两边的宽度不随着浏览器窗口的变化而变化，是固定的，只有中间的部分才可以随着窗口变化而变化。
二、两种布局的要点
经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住middle内容，而双飞翼是通过设置margin，限制内部内容区域，从而不会影响到中间的内容。
三、圣杯布局代码
<!--圣杯布局重点结构就是中间的部分 顺序是center排在最前面 方面后面调整left right位置因为left right都排在center后面 这样很容易调整上去 如果left right排在center前面 很难调整位置
-->
<div id="header">header</div><div id="container" class="clearfix"><div id="center" class="column">center</div><div id="left" class="column">left</div><div id="right" class="column">right</div></div><div id="footer">footer</div></body> body {min-height: 500px;}#container {/*用padding压缩center的大小 相当于缩了边界*/padding-left: 200px;padding-right: 190px;}.column {float: left;}#center {width: 100%;background-color: red;
}#left {width: 200px;background-color: pink;/*-100% 百分比是以父元素的宽度计算 向左100%是走到父元素的左边界*/margin-left: -100%;position: relative;/*再向左走一个left这个盒子的宽度 正好填补左边的空缺*/left: -200px;}#right {width: 190px;background-color: green;/*margin-right的对齐标准是自身 在这里如果用margin-left*/ /*会造成盒子直接对齐父元素的右边界*//*是因为margin-left的对齐标准是父元素*/margin-right: -190px;}#header {width: 100%;text-align: center;background-color: yellowgreen;}#footer {width: 100%;text-align: center;background-color: gray;}.clearfix::after {display: table;content: "";clear: both;} 
图一：如果在圣杯布局中的right部分使用margin-left
四、双飞翼布局代码
<!--同样也是center在最前面 不过这次需要用margin隐性的扩展自己的边界所以需要一个center-wrap
-->
<div id="center" class="col"><div id="center-wrap">this is center</div></div><div id="left" class="col">this is left</div><div id="right" class="col">this is right
</div>body{min-height: 500px;}.col{float: left;}#center{width: 100%;height: 200px;background-color: red;text-align: center;}#center-wrap{/*用margin隐性的扩展自己的边界*/margin :0 190px 0 200px;}#left{width: 200px;height: 200px;background-color: green;margin-left: -100%;}#right{width: 190px;height: 200px;background-color: pink;/*这次因为父元素的边界被扩展了 所以用margin-left就可以达到效果*/margin-left: -190px;}
