第六課《學習佈局》-專題：理解聖盃佈局和雙飛翼佈局

時間 2019-11-24

標籤第六學習佈局專題理解佈局雙飛简体版

原文原文鏈接

1、共性和差別

首先兩個佈局是有共性的：css

實現效果一致：都是三欄佈局，左右兩列寬度固定，中間列寬度自適應。中間列放重要的內容，所以在DOM結構中位置靠前優先渲染。
實現原理一致：都是將一個with：100%的浮動塊和另外兩個定寬浮動塊經過負外邊距和相對定位的方法實現最終佈局，所以涉及到的方法包括：浮動、負外邊距和相對定位

其次一樣的實現效果之因此有兩個名字，本質上是由於實現思路不同，致使DOM結構不同。html

2、實現思路

聖盃佈局來源於In Search of the Holy Grail這篇文章，做者在寫DOM結構的思路是先寫一個框架：框架

<header>header</header>
<div id="container"></div>
<footer>footer</footer>

框架效果：
佈局

上邊一個header，下邊一個footer，中間一個容器，三個列的結構都寫在這個容器裏。
此時能夠用這個 container容器的左右內邊距(padding)肯定中間列的位置，並給左右兩列留出空間。可是因爲左右兩列也包含在這個 container容器中，因此他們也跟着被推到了中間，就像這樣:

所以在使用負外邊距的方法將三個浮動塊放到一行以後，還須要用相對定位將左右兩個塊放到最終位置。url

雙飛翼佈局的思路是一個改良聖盃佈局的過程，既然中間列須要佈局，那就直接給它加個父元素，讓這個父元素的width：100%，使用中間列的左右外邊距(margin)肯定位置，並留出左右空間，DOM結構以下：code

<div id="container">
    <div id="middle" class="basic">middle</div>
</div>
<div id="left" class="basic">left</div>
<div id="right" class="basic">right</div>

在這樣的結構下，左右兩列沒有跟着被推到中間，所以只須要使用負外邊距就能夠實現最終佈局。htm

3、完整代碼

聖盃佈局：utf-8

DOM結構：get

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>聖盃佈局</title>
        <link rel="stylesheet" href="holygrail.css">
    </head>
    <body>
        <header class="basic">header</header>
            <div id="container">
                <div id="middle" class="basic">middle</div>
                <div id="left" class="basic">left</div>
                <div id="right" class="basic">right</div>
            </div>
        <footer class="basic">footer</footer>
    </body>
</html>

CSS樣式：it

body {
    margin: 0;
}

.basic {
    height: 50px;
    text-align: center;
    line-height: 50px;
}

header {
    background-color: aquamarine;
}

footer {
    clear: left;
    background-color: burlywood;
}

#container {
    padding: 0 150px 0 200px;
}

#middle {
    float: left;
    width: 100%;
    background-color: chartreuse;
}

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

#right {
    float: left;
    margin-right: -150px;
    width: 150px;
    background-color: silver;
}

雙飛翼佈局：

DOM結構：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>雙飛翼佈局</title>
        <link rel="stylesheet" href="flying-wing.css">
    </head>
    <body>
        <header class="basic">header</header>
            <div id="container">
                <div id="middle" class="basic">middle</div>
            </div>
            <div id="left" class="basic">left</div>
            <div id="right" class="basic">right</div>
        <footer class="basic">footer</footer>
    </body>
</html>

CSS樣式：

body {
    margin: 0;
}

.basic {
    height: 50px;
    text-align: center;
    line-height: 50px;
}

header {
    background-color: aquamarine;
}

footer {
    clear: left;
    background-color: burlywood;
}

#container {
    float: left;
    width: 100%;
}

#middle {
    margin: 0 150px 0 200px;
    background-color: chartreuse;
}

#left {
    float: left;
    margin-left: -100%;
    width: 200px;
    background-color: hotpink;
}

#right {
    float: left;
    margin-left: -150px;
    width: 150px;
    background-color: silver;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。