认识圣杯布局和双飞翼布局

问题1：圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。

---

原理大致是这样的：采用负边距使得浮动元素达到预设的位置后，再使用padding使得两侧留出空白区域待左、右边距占用，然后再使用相对定位使得左、右边距能够流向预定的位置。

第一步：先写出html代码

    

        

            
主内容栏自适应宽度
        

        

            
侧边栏1固定宽度
        

        

            
侧边栏2固定宽度
        
    

注意的是，父元素的三栏务必先写中间盒子。因为中间盒子是要被优先渲染。并且设置其自适应为width:100%。
第二步 写css样式
（1）main ,左 ,右三个区块都设置左浮动，父元素清除浮动，main区块设置100%，左右两区块需要定宽，比如200px;
（2）左区块设置margin-left ：-100%,使其覆盖main区块的左边区域。这个-100%是以mian的宽度砍掉两边的padding值后的宽度
（3）右区块设置margin-left ：负自身宽度,使其覆盖main区块的右边区域。负边距起始位置也是main砍掉右边的padding的位置起算。
（4）main自身加padding 。.main{ padding: 0 200px;} ，让父容器的3个区块往中间挤。
（5）用相对定位position:relative,leftright.让左右两个区块在不脱离文档流的情况下偏移位置，拉出自身宽度，覆盖到父元素的padding上。同时保证左右两区块移动时候不遮挡中间。

Paste_Image.png

问题2：双飞翼布局的原理? 实现步骤?

---

双飞翼和圣杯也是先设置三栏元素全部float，左右两栏添加负边框让其和中间元素挤在一行。圣杯用的是padding和相对定位，双飞翼的不同是，比如双飞翼的main中多了一层div嵌套，把margin拿到内层上去，在内部嵌套中设置左右margin，然后另外两个模块分别用负边距拉到指定位置。

Paste_Image.png