双飞翼布局与圣杯布局再理解

CSS系列之圣杯布局与双飞翼布局

---

---

前言

今天上前端课老师讲了圣杯布局，就想到了双飞翼布局，所以今天有对圣杯布局和双飞翼布局进行了再一次的学习。

---

一、为什么提出圣杯布局？

圣杯布局是国外的一些先辈提出圣杯布局地址，目的是使用css方式优化DOM渲染，希望三栏布局中的中间结构更容易显示出来。

二、圣杯布局

1.html代码

   <div class="header">Header</div>
    <div class="container">
        <div id="main" class="cloumn">中间内容</div>
        <div id="left" class="cloumn">左边内容</div>
        <div id="right" class="cloumn">右边内容</div>
    </div>
    <div class="foot">Foot</div>

2.样式设置

我们先设置header，foot，给main，left，right设置基本样式,为了让main中的宽度自适应，我们为其试着宽度为100%：

  body{
        padding: 0;
        margin: 0;
    }
    .header,.foot{
        width: 100%;
        background-color: chocolate;
        height: 100px;
    }
   #main {
        background-color: cornflowerblue;
        height: 50px;
        width:100%;
    }
    #left {
        background-color: darkcyan;
        height: 200px;
        width: 300px;
    }
    #right {
        background-color: darkgreen;
        height: 250px;
        width: 100px;
    } 

圣杯布局中为了让main先显示出来，对container中三个子元素开启了左浮动和相对定位

  .cloumn{
        float: left;
        position: relative;
    }

可以看到foot被挤上去了，并且颜色也不显示了，这是因为我们对container容器中三个子元素开启了浮动带来的影响，我们对其清除浮动，清除浮动的方法有很多，我们在foot中添加属性clear:both;

  .foot{
        clear: both;
    }

可以看到foot出现了。
现在，我们将left移动到main的左边。

1. 首先，我们为container设置padding来给左边和右边留出地方给left和right

  .container {
        padding-left: 300px;
        padding-right: 100px;
    }

2. 其次，我们将left移动到main的左边，我们给其添加css样式margin-left: -100%; 使left与main在同一行

   对于margin-left，如果是同级关系，是元素的左边距到左边元素的右间距之间的距离。如果是父子关系，是元素的左边距到父元素的右内边距之间的距离，所以margin-left：-100%会往上移动一行。细心的会发现，当我们的margin-left每发生一次变化其实都是对我们要移动之前的距离的变化。

   当margin-left为left的宽度减一，还不到整个宽度时
   
   当为整个宽度时
   
   再换一个大小
   
   当为-100%时刚好为一行

  #left {
        background-color: darkcyan;
        height: 200px;
        width: 300px;
        margin-left: -100%;
    }

可以看到效果

3. 现在我们让left移动到main左边，因为我们开启了相对定位直接对自身定位就可以了

    #left {
        background-color: darkcyan;
        height: 200px;
        width: 300px;
        margin-left: -100%;
        left: -300px; 
    }

4. 现在我们让right移动到main的右边，设置margin-right:-100px

  #right {
        background-color: darkgreen;
        height: 250px;
        width: 100px;
        margin-right: -100px;
    }

双飞翼布局有一个缺陷，就是当 main 部分的宽小于 left 部分时就会发生布局混乱。

---

三、双飞翼布局

双飞翼布局是淘宝提出的，解决了圣杯布局的缺陷问题，双飞翼布局与圣杯布局不同的地方是对了一个DOM结构，并且也不使用定位了

html代码

   <div class="header">Header</div>
    <div class="container">
        <div id="main-container" class="cloumn">
            <div id="main">中间内容</div>
        </div>
            <div id="left" class="cloumn">左边内容</div>
            <div id="right" class="cloumn">右边内容</div>
    </div>
    <div class="foot">Foot</div>

css样式

     body{
        padding: 0;
        margin: 0;
    }
    .header,.foot{
        width: 100%;
        background-color: chocolate;
        height: 100px;
    }
    .foot{
        clear: both;
    }
    .cloumn{
        float: left;
    }
    #main {
        background-color: cornflowerblue;
        height: 250px;
        margin: 0 100px 0 300px;
    }
    #main-container{
        width: 100%;
    }
    #left {
        background-color: darkcyan;
        height: 200px;
        width: 300px;
        margin-left: -100%;
    }
    #right {
        background-color: darkgreen;
        height: 250px;
        width: 100px;
        margin-left: -100px;
    }