聖盃佈局——針對前端小白篇

什麼是聖盃佈局

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

如圖所示

• header和footer的寬度填充滿整個屏幕
• 縮小或者拉大屏幕，左欄和右欄的寬度保持不變，中間的寬度隨着變小或變大

下面，讓咱們來實現這個效果

Dom結構

<header id="header">header</header>
    <div id="container">
        <div id="center" class="column">center</div>
        <div id="left" class="column">left</div>
        <div id="right" class="column">right</div>
    </div>
<footer id="footer">footer</footer>
複製代碼

解析：

• 使用了header和footer這兩個HTML5語義化標籤，語義化標籤有利於seo
• center塊放在left塊前面是爲了讓center塊更快加載出來（DOM加載是按順序加載的）
• center、left和right使用了相同的class名，是由於它們有一些公共的css樣式

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;
}

複製代碼

實現以下圖

第二步

如今要讓left塊、right塊和center塊水平排列，處於統一水平線，所以要讓它們浮動起來。加上css樣式 #container .column { float: left; }

由於center塊的寬度是100%，佔據了所有的位置，left塊和right塊只能下移，可是能夠看到footer的竟然上移了，這是由於container塊的三個子元素都浮動（浮動會脫離文檔流）了，即便咱們給了三個子元素的height爲200px，container的height爲0，footer就會上移。

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

一、設置contaniner的高度；

二、footer的樣式加上clear:both，能夠清除其餘元素浮動對它的影響；

三、利用僞元素清除浮動

#container:after {
    display: block;
    content: '';
    width: 100%;
    height:0;
    clear: both;
}
複製代碼

實現如圖

第三步

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

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

解析： 盒子模型有兩種，w3c標準的盒子模式和IE怪異盒子，區別在於padding（內邊距）和border（邊框）是否算在盒子的width和height裏。瀏覽器默認的盒子模型是content-box，即padding和border不算在width裏，由於咱們的container的width是100%，若是是content-box，則container表現出來的width要大於整個瀏覽器的寬度，會看到瀏覽器下方有滾動條，所以咱們設置box-sizing: border-box，讓padding算在width裏。

實現如圖

第四步

要讓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使用，統一層級的元素，當有重疊時，後面的元素會蓋住前面的元素）

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

#left {
    position: relative;
    right: 200px;
}
複製代碼

解析： relative對象遵循正常文檔流，能夠根據top，right，bottom，left等屬性在正常文檔流中偏移位置。right的距離是根據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;
}

複製代碼

注意

若是你將瀏覽器的寬度縮小到必定程度，會發現頁面的佈局出現錯亂，這是由於左欄和右欄的寬度和margin值、container的padding值都是寫死的，當瀏覽器的寬度不足以容納它們時，就會出現錯亂。由於咱們在寫頁面的時候應該響應式佈局，即無論瀏覽器的寬度如何變化，咱們展現出來的頁面依然是完美的（哈哈有點誇張），固然，這確定會有一個最小寬度要求（pc端看具體需求，移動端通常是按iphone5的寬度320px）

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