布局系列-圣杯布局、双飞翼布局

[xieliuduo]

我是这么理解的双飞翼布局，和圣杯布局的！

如果main要给左边的left模块和右边的right模块都让出一定宽度来的话，只有padding：0 100px 0 200px;或者margin：0 100px 0 200px;这两种方式！

这两条路线，如果走margin路线， 一路走下去，你会发现最后你写出的代码就是双飞翼如果走padding路线，那就是圣杯！1.走margin的路线的话！相信一般都是container设置100%。或者宽度有具体数值（如1190px）然后margin 0 auto居中，然后让内部元素来加margin，来内部空出一切空白！这里给给main设置margin：0 100px 0 200px;这样左右就留了一些位置给另外两个模块，让另外两个模块上来，main要设置float：left，为了自适应，肯定还要设置width100%；但是这个100%跟前面的margin：0 100px 0 200px不对付了！如果container是1000，因为main同时具备margin和width100%，结局就是main宽度也是1000px，但是main左边空了200px，右边直接冲出去了！所以，这就是为什么双飞翼的main多了一层div嵌套，把margin拿到内层上去，把100%和margin分开，然后另外两个模块分别负边距拉到指定位置就ok了！当然，如果再确定了是要加一层div嵌套的话，又多出一个选项，内层也是可以用padding：0 100px 0 200px;代替margin：0 100px 0 200px的！这算一个岔路！

<div class="content"> 
	   <div class="main-wraper">
	    	<div class="main"></div>
	   </div>    
	   <div class="left"></div>  
	   <div class="right"></div>
</div>

这个思路完事！
2.如果走padding路线的话，那就是圣杯！container自身加padding之后，再看看其子元素这三个模块！因为3个模块和container包含关系嘛，padding是父元素的地盘所以在使用了负边距把left模块和right给拉上来以后！你会发现：left模块的负边距-100%是以container的宽度砍掉两边的padding值后的宽度，同样right模块的负边距起始位置也是container砍掉右边的padding的位置起算！结果就是左右的空白依然是空白，左右两个模块紧贴着空白的内边放着！这咋办，这就是为什么relative要登场了！分别给left模块和right模块添加relative属性，然后分别添加left或者right属性，我们经常用到absolute+leftright布局，其实relative+leftright也可以，这样模块是可以在不脱离文档流的情况下随意偏移位置的！于是把left模块和right模块向外拉，拉出自身的宽度~这样就盖到父元素的padding空白上去！这就是圣杯了！

<div class="content">   
	 <div class="main"></div>  
	 <div class="left"></div>  
	 <div class="right"></div>
</div>

这是第二个思路！

demo预览