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: 300
 
px;
         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加一個最小寬度!