摘要：什么是圣杯布局三欄的布局結構，左欄和右欄的寬度固定不變，中間欄的寬度自動填充，會跟著父級元素的寬度變化而變化。的距離是根據(jù)塊的左邊位置來計算。

三欄的布局結構，左欄和右欄的寬度固定不變，中間欄的寬度自動填充，會跟著父級元素的寬度變化而變化。

如圖所示

header和footer的寬度填充滿整個屏幕

縮小或者拉大屏幕，左欄和右欄的寬度保持不變，中間的寬度隨著變小或變大

下面，讓我們來實現(xiàn)這個效果

header
    

        
center
        
left
        
right
    

解析：

使用了header和footer這兩個HTML5語義化標簽，語義化標簽有利于seo

center塊放在left塊前面是為了讓center塊更快加載出來（DOM加載是按順序加載的）

center、left和right使用了相同的class名，是因為它們有一些公共的css樣式

設置好header和footer的寬度是100%，左欄寬度200px，右欄寬度300px，中間欄寬度100%（因為要跟著瀏覽器的寬度變化）

body {
    width: 100%;
    margin: 0;  //去掉瀏覽器默認的margin寬度
}

#header,
#footer {
    width: 100%;
    background-color: #ccc;
}

#container {
    width: 100%;
    background-color: yellow;
}

#container .column {
    height: 200px;
}

#left {
    width: 200px;
    background-color: green;
}

#center {
    width: 100%;
    background-color: blue;
}

#right {
    width: 300px;
    background-color: red;
}

實現(xiàn)如下圖

現(xiàn)在要讓left塊、right塊和center塊水平排列，處于統(tǒng)一水平線，因此要讓它們浮動起來。加上css樣式
#container .column { float: left; }

因為center塊的寬度是100%，占據(jù)了全部的位置，left塊和right塊只能下移，但是可以看到footer的居然上移了，這是因為container塊的三個子元素都浮動（浮動會脫離文檔流）了，即使我們給了三個子元素的height為200px，container的height為0，footer就會上移。

這里清除浮動的辦法有三，

1、設置contaniner的高度；

2、footer的樣式加上clear:both，可以清除其他元素浮動對它的影響；

3、利用偽元素清除浮動

#container:after {
    display: block;
    content: "";
    width: 100%;
    height:0;
    clear: both;
}

實現(xiàn)如圖

設置container的padding-left等于left塊的寬度，padding-right為right塊的寬度
加上樣式

#container {
    padding-left: 200px;
    padding-right: 300px;
    box-sizing: border-box;
}

解析：
盒子模型有兩種，w3c標準的盒子模式和IE怪異盒子，區(qū)別在于padding（內邊距）和border（邊框）是否算在盒子的width和height里。瀏覽器默認的盒子模型是content-box，即padding和border不算在width里，因為我們的container的width是100%，如果是content-box，則container表現(xiàn)出來的width要大于整個瀏覽器的寬度，會看到瀏覽器下方有滾動條，因此我們設置 box-sizing: border-box ，讓padding算在width里。

實現(xiàn)如圖

要讓left塊挪到center塊的左邊，right塊挪到center塊的右邊
原本center塊、left塊和right塊應該是同一水平線排列，因為container的寬度不夠（center塊的寬度等于container的寬度）在水平線容納三塊，才把left塊和right塊擠下來

因此我們加上left塊的樣式 margin-left: -100%;

盒子的margin的距離是以盒子對應的方向來計算，負值表示按反方向移動。比如marin-left以盒子的左邊來算，margin-right以盒子的右邊來算

margin的值如果是按百分比計算，那計算的基礎是上一層父級的寬度，在這里即是container的width，又因為center塊的width和container塊一樣，這時候left塊和center塊重疊了，而且left塊在center塊上面（如果沒有設置層級z-index，當然z-index還要配合position使用，統(tǒng)一層級的元素，當有重疊時，后面的元素會蓋住前面的元素）

這時候left塊還要再向左移動它自身寬度的位置，也就是200px;

#left {
    position: relative;
    right: 200px;
}

解析：
relative對象遵循正常文檔流，可以根據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。right的距離是根據(jù)left塊的左邊位置來計算。

接下來給right塊加上樣式 #right { margin-right: -300px;}
表示right塊往左移動300px（剛好覆蓋在container的padding-right位置）

整個css代碼如下：

body {
    width: 100%;
    margin: 0;
}

#header,
#footer {
    width: 100%;
    background-color: #ccc;
}

#container {
    width: 100%;
    padding-left: 200px;
    padding-right: 300px;
    box-sizing: border-box;
    background-color: yellow;
}

#container:after {
    display: block;
    content: "";
    width: 100%;
    height:0;
    clear: both;
}

#container .column {
    height: 200px;
    float: left;
}

#left {
    width: 200px;
    background-color: green;
    margin-left: -100%;
    position: relative;
    right: 200px;
}

#center {
    width: 100%;
    background-color: blue;
}

#right {
    width: 300px;
    background-color: red;
    margin-right: -300px;
}

ps：這是我一次寫文檔，如有錯誤的地方麻煩各位大佬指正，感謝！！！