Css有关于圣杯及双飞翼布局

css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。
说道margin负值问题就不得不说一下前端页面常见的布局：圣杯和双飞翼布局。其实这两种布局在实际应用上是一样的东西，不同的是概念不一样。使用的就是我们常见的float以及margin负值得概念

圣杯布局来源于2006年发在a list part上的这篇文章：a list part 而双飞翼布局则来源于淘宝的UED 淘宝双飞翼布局介绍 下面直接上代码：

<div class="content">
    <div class="middle f-fl">
    <div class="txt">圣杯双飞翼布局</div>
    </div>
    <div class="right f-fl"></div>
    <div class="left f-fl"></div>
 </div>

<style>
    *{margin: 0;padding: 0}
     body {min-width: 700px;}
     .f-fl{float: left;}
     .content{
         width: 100%;
         height: 300px;
         overflow: hidden;
         position: relative;
         border: 1px #ccc solid;
     }
     .middle{
         width: 100%;
         height: 300px;
         background-color: #ccc;
     }
     .txt{
         margin: 0 300px 0 300px;
     }
     .left{
         width: 300px;
         height: 300px;
         margin-left: -100%;
         background-color: blue;
     }
     .right{
         width: 300px;
         height: 300px;
         margin-left: -300px;
         background-color: red;
     }

    </style>

通过缩放页面就可以发现，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响我们的浏览。注意：当你缩放页面的时候，宽度不能小于700PX，为了安全起见，最好还是给body加一个最小宽度!