一、聖杯布局/雙飛翼布局
布局特點：左右兩欄固定寬度，中間部分自適應 三列等高
實現乙個左邊100px右邊150px中間自適應的布局
先來看看效果圖：
**：
這是top!
這是left!
這是content!
這是多行高度！
這是right!
這是foot!
1.先寫乙個基本布局
2.將中間left、content和right向左浮動，並設定left和right的寬度分別設定為100px和150px，將三者的父元素的左右內邊距設定為100px和150px，與left和right的寬度相同。
3.由於content寬度設定了100%，為content和right設定乙個margin-left屬性
4.用相對定位把left向左移，right向右移
5.接著處理三列等高的問題：採用padding補償法：
首先把列的padding-bottom設為乙個足夠大的值，再把列的margin-bottom設乙個與前面的padding-bottom的正值相抵消的負值，父容器設定超出隱藏，這樣子父容器的高度就還是它裡面的列沒有設定padding-bottom時的高度，當它裡面的任一列高度增加了，則父容器的高度被撐到它裡面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。因為背景是可以用在padding占用的空間裡的，而且邊框也是跟隨padding變化的，這樣就成功的使得三者列等高了
優點:
二、兩欄布局
一欄定寬，一欄自適應
先來看看效果圖
**：
這是top!
定寬自適應
這是foot!
如果會了聖杯布局，那麼兩欄布局就很簡單了
CSS常見布局
1.1使用inline block和text align parent.child1.2使用margin 0 auto實現 child1.3使用絕對定位實現 parent child margin left的負值為盒子寬度的一半 1.4使用flex布局實現 parent2.1使用vertical a...
css常見布局
一列布局 1.一列布局 不是自適應 header 頁頭 main 主體內容 footer 頁尾 2.一列寬度自適應布局 要想寬度自適應，只需要按照百分比來設定寬度，內容就可以根據瀏覽器視窗自動調節大小。下例中寬度是自適應的，而高度不是自適應的。頁頭主體內容 頁尾 3.單列經典布局 頁頭左列 右列頁尾...
CSS 常見的css布局
1 單列布局 主要使用max width屬性樣式實現，使用max width是為了當螢幕小於2000px時不出現滾動條 2 兩列自適應布局 兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式，為了觸發ie瀏覽器的haslayout屬性，需設定zoom 1 2.1 使用float over...