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

三欄的布局結(jié)構(gòu)，左欄和右欄的寬度固定不變，中間欄的寬度自動(dòng)填充，會(huì)跟著父級元素的寬度變化而變化。

如圖所示

header和footer的寬度填充滿整個(gè)屏幕

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

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

header
    

        
center
        
left
        
right
    

解析：

使用了header和footer這兩個(gè)HTML5語義化標(biāo)簽，語義化標(biāo)簽有利于seo

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

center、left和right使用了相同的class名，是因?yàn)樗鼈冇幸恍┕驳腸ss樣式

設(shè)置好header和footer的寬度是100%，左欄寬度200px，右欄寬度300px，中間欄寬度100%（因?yàn)橐鵀g覽器的寬度變化）

body {
    width: 100%;
    margin: 0;  //去掉瀏覽器默認(rèn)的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;
}

實(shí)現(xiàn)如下圖

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

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

這里清除浮動(dòng)的辦法有三，

1、設(shè)置contaniner的高度；

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

3、利用偽元素清除浮動(dòng)

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

實(shí)現(xiàn)如圖

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

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

解析：
盒子模型有兩種，w3c標(biāo)準(zhǔn)的盒子模式和IE怪異盒子，區(qū)別在于padding（內(nèi)邊距）和border（邊框）是否算在盒子的width和height里。瀏覽器默認(rèn)的盒子模型是content-box，即padding和border不算在width里，因?yàn)槲覀兊腸ontainer的width是100%，如果是content-box，則container表現(xiàn)出來的width要大于整個(gè)瀏覽器的寬度，會(huì)看到瀏覽器下方有滾動(dòng)條，因此我們設(shè)置 box-sizing: border-box ，讓padding算在width里。

實(shí)現(xiàn)如圖

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

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

盒子的margin的距離是以盒子對應(yīng)的方向來計(jì)算，負(fù)值表示按反方向移動(dòng)。比如marin-left以盒子的左邊來算，margin-right以盒子的右邊來算

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

這時(shí)候left塊還要再向左移動(dòng)它自身寬度的位置，也就是200px;

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

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

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

整個(gè)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：這是我一次寫文檔，如有錯(cuò)誤的地方麻煩各位大佬指正，感謝?。?！