布局------圣杯和双飞翼布局篇（圣杯------双飞翼）

圣杯布局:(两边定宽,中间自适应):

• 第一种：flex实现圣杯布局

 .w200 { /* 左右定宽 */
        width: 100px;
        height: 500px;
        background-color: green;
      }

      .parent {
        display: flex;
        /* flex-direction: row; */
        width: 100%;
      }

      .center {
        /* width: -webkit-calc(100% - 200px); */  
        // 使用calc函数也可以实现自适应剩余空间
        flex: 1;
        height: 500px;
        background-color: #1637ce;

      }

<div class="parent">
      <div class=" w200">左边</div>
      <div class="center">中间</div>
      <div class=" w200">右边</div>
    </div>

• 第二种：flex实现的方式：加载顺序不同，这种中间部分优先加载呢

实现的代码：

 * {
        box-sizing: content-box;
        /* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        flex-direction: column;
        /* 头、中部、脚纵向显示 */
      }

      header,
      footer {
        flex: 0 0 50px;
        /* 头、脚尺寸固定，不放大、不缩小 */
        background: #3f3f3f;
      }

      .main {
        display: flex;
        flex: 1;
        /*
      flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)  分配多余空间之前项目占据的主轴空间(flex-basis)
      flex:1指的是：中部区域自由伸缩
      auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
      块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
      */
      }

      .content {
        flex: 1;
        background: red;
        height: 1000px;
        /*
      横向中间内容区自适应，即使未指定宽度，但会分配宽度
      块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
      */
      }

      .left,
      .right {
        height: 800px;
        background: blue;
        width: 200px;
      }

      .left {
        order: -1;   /*关键的一句，是和第一种圣杯布局不同的地方*/
        /* 让left居于左侧 */
      }

    
<header></header>
    <div class="main">
      <div class="content"></div>  
      <!--  //可保证中间元素最先加载 -->
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <footer></footer>

• 第三种：使用最原始的margin + float + padding 实现；

     .container {
        padding: 0 200px;
        height: 200px;
        background-color: red;
      }

      .main {
        float: left;
        width: 100%;
        height: 100%;
        background-color: blue;
      }

      .left,
      .right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: green;
      }

      .left {
        position: relative;
        margin-left: -100%;
        left: -200px
      }

      .right {
        position: relative;
        right: -200px;
        margin-left: -200px
      }


 <div class="container">
      <div class="main">中间栏</div>
      <div class="left">左边栏</div>
      <div class="right">右边栏</div>
    </div>

双飞翼布局：

由来：最早是淘宝团队提出来的，是为了解决圣杯布局中开启定位的问题；它是圣杯布局的优化解决方案!

它只是在圣杯布局（个人总结中的第三种布局的基础上改动的一部分，即中心盒子加了一个小盒子，来解决覆盖的部分，同时定位属性也可以完全移除，）

• 第一种： 淘宝官方的解决方案。（在main盒子里加一个盒子，来设置左右margin,效果是不用在设置定位属性，会更好~）

 .container {
        height: 200px;
        background-color: red;
      }

      .main {
        float: left;
        width: 100%;
        height: 100%;
        background-color: blue;
      }
      .main .inner{
        margin-right:200px;
        margin-left:200px;  
      }

      .left,
      .right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: green;
      }

      .left {
        margin-left: -100%;
      }

      .right {
        margin-left: -200px
      }


 <div class="container">
      <div class="main"><div class="inner"></div></div>
      <div class="left">左边栏</div>
      <div class="right">右边栏</div>
    </div>

•  第二种：个人根据官方的双飞翼布局改动的，解决布局相同哦（关键点在container中的padding）

 .container {
        padding: 0 200px;   // 第一种，直接父盒子加padding;
        height: 200px;
        background-color: red;
      }

      .main {
        float: left;
        width: 100%;
        height: 100%;
        background-color: blue;
      }

      .left,
      .right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: green;
      }

      .left {
        position: relative;
        margin-left: -100%;
        left: -200px
      }

      .right {
        position: relative;
        right: -200px;
        margin-left: -200px
      }


 <div class="container">
      <div class="main">中间栏</div>
      <div class="left">左边栏</div>
      <div class="right">右边栏</div>
    </div>