Header內容區
中間彈性區
左邊欄
右邊欄
寫結構的時候要注意，父元素的的三欄務必先寫中間盒子。因爲中間盒子是要被優先渲染嘛~並且設置其自適應，也就是width:100%。
第二步：給出每個盒子的樣式
header{width: 100%;height: 40px;background-color: darkseagreen;}
.container{ height:200px;overflow:hidden;}
.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
.left{ width: 200px;height: 200px;background-color: blue;float:left;}
.right{width: 200px;height: 200px;background-color: darkorchid;float:left;}
footer{width: 100%; height: 30px;background-color: darkslategray;}
第三步：看此時的效果圖
中間的三欄並沒有在一行內顯示
大家可以看到，三欄並沒有在父元素的一行顯示，就是因爲中間盒子我們給了百分之百的寬度。所有左右兩個盒子纔會被擠下來。
那麼如何讓它們呈現出一行三列的效果呢？那就要讓左邊的盒子要到中間盒子的最左邊，右邊的盒子到中間盒子的最右邊。換個想法，如果中間盒子不是100%的寬度，那麼按照文檔流，左邊的盒子一定會在中間盒子的後面顯示，接着顯示右邊的盒子。但是現在中間盒子是滿屏了的，所以左右兩個盒子被擠到下一行顯示。我們要做到的是讓左右兩個盒子都上去。此時，CSS的負邊距(negative margin)該上陣了。
第四步：利用負邊距佈局
1.讓左邊的盒子上去
需要設置其左邊距爲負的中間盒子的寬度，也就是.left {margin-left:-100%;}。這樣左盒子纔可以往最左邊移動。
2.讓右邊的盒子上去
需要設置其左邊距爲負的自己的寬度，也就是.right {margin-left：-200px;}。這樣右盒子纔可以在一行的最右邊顯示出自己。
第五步：看此時的效果圖
實現固比固佈局
到這裏，是不是感覺很有成就感？但是很遺憾的告訴你，還沒結束哦！
我們現在的確是硬性的實現了固比固佈局。但是要記住，中間盒子是自適應的寬度，所以中間盒子裏的內容會被左右盒子給壓住一部分。
比如現在我給中間盒子加很多的內容，大家看看效果圖：
中間盒子的內容被蓋住
所以，我們的工作還沒停止。
第六步：讓中間自適應的盒子安全顯示
首先:利用父級元素設置左右內邊距的值，把父級的三個子盒子往中間擠。
代碼如下：.container{ padding: 0 200px;} 這裏的200px是左右盒子的寬度。
效果如下：
利用父級的內邊距將盒子往中間擠
我們可以看到，左右兩邊的內邊距是有了，但是中間盒子上的內容還是被壓着。
其次:給左右兩個盒子加一個定位，加了定位之後左右兩個盒子就可以設置left和right值。
代碼如下：
.left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;
第七步：看最終效果圖
聖盃佈局大功告成啦！