第六课《学习布局》-专题：理解圣杯布局和双飞翼布局

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