529 双飞翼布局

双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案。
主要是优化了圣杯布局中开启定位的问题。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>双飞翼布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #parent {
      height: 300px;
    }

    #left,
    #center,
    #right {
      height: 300px;
      font-size: 50px;
      /* 第一步: 在三个容器在一行排列 => 左右容器因为center的宽度是100% 所以放不下就掉下去了  */
      float: left;
    }

    #left {
       300px;
      background-color: #c9394a;
      /* 第三步位置的移动 利用margin的负值的技巧 */
      margin-left: -100%;
    }

    #center {
       100%;
    }

    #right {
       300px;
      background-color: greenyellow;
      /* 第三步位置的移动 利用margin的负值的技巧 */
      margin-left: -300px;
    }

    #inner {
      height: 300px;
      background-color: green;
      /* 第二步: 加到中间的容器的身上  margin */
      margin-left: 300px;
      margin-right: 300px;
    }
  </style>
</head>

<body>

  <!-- 双飞翼  结构  center  left  right   左右定宽 中间自适应
    作用: 把圣杯布局的定位给优化掉了 
    实现思路:
    1. 让三个容器在一行显示  float：left
    2. 让中间的容器留出间距(为了放左右两个容器)  -   给中间的容器加外间距  margin
    3. 进行移动  把左边容器移动到center容器的左边
                把右边容器移动到center容器的右边
        利用marign的负值的技巧进行移动 

        定位直接被优化掉了  双飞翼布局里面是没有定位方位移动的


    总结: 圣杯布局、双飞翼布局

    相同点:  结构顺序一样   center left right
            第一步是一样的  都是用float让三个容器在一行显示
      
    区别:   双飞翼布局  在中间的容器外面前套一层父容器

            左右留白显示的方法不一样:   
            + 圣杯布局    parent 加的内填充 padding-left/padding-right:200px
            + 双飞翼布局  中间容器的子元素  margin外间距  margin-left/margin-right:200px

            移动位置的方法不一样:
            + 圣杯布局  margin负值的技巧  +  position的方位  一起来实现位置的移动
            + 双飞翼布局  margin负值的技巧 一步搞定  把position定位方位移动给优化掉了

      双飞翼布局 其实是对圣杯布局的一个优化写法！                               
  -->

  <div id="parent">
    <div id="center">
      <div id="inner">中间</div>
    </div>
    <div id="left">左边</div>
    <div id="right">右边</div>
  </div>
</body>

</html>