主流布局--双飞翼布局

主流布局–双飞翼布局

什么是双飞翼布局？
双飞翼布局最早是淘宝团队提出的，是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。
HTML

<div class="parent">
    <div class="center">
        <div class="inner"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

   .parent{
            height: 300px;
        }
        .left,
        .right,
        .center{
            height: 300px;
            float: left;
        }
        .left,
        .right{
            width: 300px;
        }
        .left{
            background-color: brown;
            margin-left: -100%;

        }
        .center{
            width: 100%;
            background-color: darkgoldenrod;

        }
        .right{
            background-color:purple;
            margin-left: -300px;
          }
        .inner{
            height: 300px;
            background-color: skyblue;
            margin-left: 300px;
            margin-right: 300px;
        }

圣杯布局相比于双飞翼布局，只是在center元素里面添加了一个inner子级元素，解决了，center元素被left和right元素覆盖的内容。
因此，给inner元素添加一个margin-left和margin-right就可以将内容显示在中间，而不会被左右元素覆盖部分内容。

等分布局

什么是等分布局？
等分布局就是指一行被分为若干列，每一列宽度是相同的值。
1、使用float属性来实现等分布局的效果
2、display属性的值有关table实现等分布局效果

第一种解决方案

HTML

<div class="parent">
   <div class="column1"></div>
   <div class="column2"></div>
   <div class="column3"></div>
   <div class="column4"></div>
</div>

CSS

 .column1,
        .column2,
        .column3,
        .column4{
            width: 25%;
            height: 300px;
            float: left;
        }
     .column1{
         background-color: blue;
     }
    .column2{
        background-color: yellow;
    }
    .column3{
        background-color: yellowgreen;
    }
    .column4{
        background-color: lightsalmon;
    }

第二种解决方案

CSS

  .parent{
            width: 100%;
            display: table;
        }
        .column1,
        .column2,
        .column3,
        .column4{
            height: 300px;
            display: table-cell;
        }
     .column1{
         background-color: blue;
     }
    .column2{
        background-color: yellow;
    }
    .column3{
        background-color: yellowgreen;
    }
    .column4{
        background-color: lightsalmon;
    }

这里我们使用的是parent元素display属性设置为table，如果不设置高度，将默认由子级元素撑起来，那么高度为300px，此时的宽度没有设置，为0px。当设置父级元素宽度为100%的时候就可以正常显示了。

等分布局存在间距的情况

HTML代码变化

空白间距的实现用margin或者padding
HTML

<div class="parent-fix">
    <div class="parent">
        <div class="column1"></div>
        <div class="column2"></div>
        <div class="column3"></div>
        <div class="column4"></div>
    </div>
</div>

CSS

  .column1,
        .column2,
        .column3,
        .column4{
            width: 25%;
            height: 300px;
            float: left;
            padding-left: 10px;
        }
     .column1{
         background-color: blue;
     }
    .column2{
        background-color: yellow;
    }
    .column3{
        background-color: yellowgreen;
    }
    .column4{
        background-color: lightsalmon;
    }

如果这时候加padding的话，由于宽度为100%加上10px就会导致元素换行。
此时我们需要用到一个属性，box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。 也就是说，每一行的宽度不变还是25%,但是padding-left被定义到里面去了
CSS

 .parent-fix{
            margin-left: -10px;
        }
        .column1,
        .column2,
        .column3,
        .column4{
            width: 25%;
            height: 300px;
            float: left;
            box-sizing: border-box;
            padding-left: 10px;
        }
        .inner{
            height: 300px;
        }
     .column1 .inner{
         background-color: blue;
     }
    .column2 .inner{
        background-color: yellow;
    }
    .column3 .inner{
        background-color: yellowgreen;
    }
    .column4 .inner{
        background-color: lightsalmon;
    }

HTML

<div class="parent-fix">
    <div class="parent">
        <div class="column1"><div class="inner"></div></div>
        <div class="column2"><div class="inner"></div></div>
        <div class="column3"><div class="inner"></div></div>
        <div class="column4"><div class="inner"></div></div>
    </div>
</div>

等分布局的第二种解决方案修改

CSS

 .parent-fix{
            overflow: hidden;
        }
        .parent{
            width: 1529px;
            display: table;
            margin-left: -10px;
        }
        .column1,
        .column2,
        .column3,
        .column4{
            display: table-cell;
            box-sizing: border-box;
            padding-left: 10px;
        }
        .inner{
            height: 300px;
        }
     .column1 .inner{
         background-color: blue;
     }
    .column2 .inner{
        background-color: yellow;
    }
    .column3 .inner{
        background-color: yellowgreen;
    }
    .column4 .inner{
        background-color: lightsalmon;
    }

在添加边框的时候可能会出现两边会多出10px,以上代码是通过设置空白间距后进行调试处理的。（可能只有自己看的懂，视频老师是这样讲解的，实际过程中还是需要自己去分析调试）

等高布局

什么是等高布局？
等高布局就是一行被划分成为若干的列，每一列的高度值都是相等的。

等高布局的实现方式

dispaly属性的有关table实现等高布局效果
padding+margin属性实现等高布局的效果

第一种解决方案

HTML

<div class="parent">
    <div class="left">dd</div>
    <div class="right">vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</div>
</div>

CSS

 .parent{
            height: 100%;
            display: table;
        }
        .left,
        .right{
            width: 300px;
            display: table-cell;
        }
        .left{
            background-color: yellowgreen ;
        }
        .right{
            background-color: lightsalmon;
        }

表格单元格默认是等高的。

第二种解决方案