CSS基础知识10-两种CSS布局
撩科學院視頻課NICE!!!希望學得明白！
圣杯布局/雙飛翼布局
功能相同，都是為了實現一個兩側寬度固定，中間寬度自適應的三欄布局。圣杯布局來源于In Search of the Holy Grail，而雙飛翼布局來源于淘寶UED。
特點：兩側寬度固定，中間寬度自適應；中間部分在DOM結構上優先，以便先行渲染；允許三列中的任意一列成為最高列；只需要使用一個額外的<div>標簽。
1.圣杯布局
1）HTML代碼。
2）使三個區域都處于左浮動狀態，并使main的寬度成父容器的100%。
body{margin: 0;padding: 0;} .container{/*設置最小寬度，針對PC端*/min-width: 400px;height: 200px;background-color: green;/*預留出位置*/padding: 0 200px;} .container .left, .right{width: 200px;height: 200px;background-color: red;float: left;}.container .main{width: 100%;height: 200px;background-color:blue;float: left;}3）為兩側側邊欄添加負margin，用以調整位置，其中擺在左邊的left的margin-left為-100%。而右邊right的margin-left則為負的其自身的寬度。（利用了浮動元素的負margin到一定值后會使其自身往上一行移動的原理）
4）為class='container'的主容器設置左右padding值，使其為以后的側邊欄定位空出位置，padding的值為側邊欄的寬。
5）對left和right添加position：relative，然后對它們進行定位，移動到兩側，圣杯布局就初步做完了。
2.雙飛翼布局（響應式）
不僅能滿足main處于優先加載的地位，而且更好的解決了圣杯布局的錯亂問題，且css代碼更簡單，缺點是增加了一個標簽。
1）給main里面添加一個內容標簽content，并且設置它的左右margin值為左右側邊欄的寬度；
2）去掉main的背景色和高度；（這個沒看懂！）
雙飛翼會把中間欄擠沒了，圣杯會有滾動條。
希望自己能夠記住吧！多練習就好了！
總結
以上是生活随笔為你收集整理的CSS基础知识10-两种CSS布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学会这六种方法，让你的设计变得中国风
- 下一篇： IE7和IE8的CSS样式不兼容