经典面试布局

介绍两个经典布局：
一、圣杯布局和双飞翼布局
简单介绍一下：这两种布局作为经典的三栏式布局是面试中的常客。两种布局都是两边两栏宽度固定，中间栏宽度自适应。 在HTML结构上中间栏在最前面保证了最先渲染中间提升性能（因为这两种布局都比较老，在现在浏览器中这点性能优化效果并不是很大），并且兼容性良好。两种布局的实现方法前半部分相同，后半部分的实现各有利弊，下面详细介绍一下两者的区别：
二、圣杯布局
首先，既然是三栏式布局我们需要3个div：

    <header>圣杯布局</header>
    <div class="bd">
        <div class="main text">
            main
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
    <footer>footer</footer>

给main设置width：100%，让它始终占满窗口，这样才有自适应的效果。
然后再给它加上点样式区分，效果如下：

为了形成在一行三栏布局，给三个方块都加上浮动float：left（注意清除浮动，因为浮动回导致父元素高度塌陷）

接着我们要把三个方块拉到一行，这里要利用负margin的技巧。

• -left要放到main的左边，设置margin-left: -100%,因为margin的百分比是相对与父元素的，所以需要整整一行的宽度才能补偿这个margin的值，所以left就能到main的左边。

• 接着让right到main的右边，只需要设置margin-left的值为负的right的宽，比如margin-left:
  -200px;，正好使main重叠right的宽度，因为设置了浮动所以right就会到main的右边了。
  下面我们来看一下效果：
  
  虽然已经达到了效果，但是其实我们给两个方块变透明，再给中间加点内容看看是这样的：
  
  可见，由于三个方块都设置了浮动，脱离的文档流，两边固定宽度的两栏会挡住我们的内容。
  因此，我们需要中间栏给两边的位置腾出来。我们可以设置padding和margin都可以用来腾位置，这两个属性分别就是圣杯布局和双飞翼布局的区别，不过双飞翼布局还需要稍微的改造一下HTML的结构。
  圣杯布局——使用的是padding属性给两边的固定宽度的两栏腾位置。（ padding: 0 200px 0 200px）

• 第一步：为三个元素的父元素加上padding属性，腾开位置
  

• 第二步：由于腾开位置后会产生空白，所以使用position: relative;属性来移动左右两栏，这样就不会遮挡了。这样我们需要的圣杯布局就显示出来了，如下:
  
  注意事项：有一个最小宽度，当页面小于最小宽度时布局就会乱掉。所以最好给body 设置一个min-with。整个min-with是计算出来的。就是left-width*2+right-width。简单来说就是：“由于设置了相对定位，所以当left原来的位置和right的位置产生重叠时，由于浮动的原因一行放不下就会换行”。所以布局就被打乱了，但是使用双飞翼布局就可以避免这个问题。
  三、双飞翼布局—使用margin属性
  首先我们需要对HTML结构进行更改：

<header>双飞翼布局</header>
    <div class="bd">
        <div class="main text">
            <div class="main-content">main</div>
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
<footer>footer</footer>

在main里面又加了一个内容层，如果知道盒子模型，就知道我们是不能直接给main添加margin属性，因为我们已经设置了width：100%，再设置margin的话就会超过窗口的宽度，所以我们再创造一个内容层，将所有要显示的内容放到了main-content中，给main-content设置margin就可以了。
为了不改变父元素，所以只需要给main-content设置margin: 0 200px 0 200px 属性就可以达到效果。
两种布局的区别：
两者都是通过设置负margin来实现元素的排布，

• 不同的是html结构，双飞翼是在main设置一个main-content并设置它的左右margin，而圣杯布局设置的是bd的padding，来排除两边元素的覆盖。
• 双飞翼布局可以多了一个html结构，但是可以不用设置left，right元素的定位。

圣杯布局是中间栏为两边腾开位置。
双飞翼布局则是中间栏不变，将内容部分分别为两边腾开。