圣杯布局和双飞翼布局

圣杯布局和双飞翼布局原理一样，都是为了首先加载需要的内容而设定的，例如我们需要首先加载页面中间部分，两边的内容可以等待加载

圣杯布局

 * {
            margin: 0px;
            padding: 0px;
        }

        .content {
            width: 100%;
            background: green;
            height: 200px;
        }

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

        .wrap div {
            float: left;
        }

        .wrap {
            padding: 0 200px;
            height: 2000px;
        }

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

        }

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

 <div class="wrap">
      <div class="content">
           content
      </div>
      <div class="left">left</div>
      <div class="right">right</div>
  </div>

双飞翼布局

 * {
            margin: 0;
            padding: 0;
        }

        .left,
        .right {
            width: 200px;
            height: 200px;
            background: pink;
            float: left;
        }

        .content {
            height: 200px;
            background: rgb(45, 173, 75);
            float: left;
            width: 100%;
        }

        .ineer {
            margin: 0 200px;
            height: 200px;
        }

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

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

 <div class="wrap">
        <div class="content">
                <div class="ineer">content</div>
            </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

flex实现方案

 * {
            margin: 0;
            padding: 0;
        }

        .content {
            display: flex;
        }

        .left,
        .center,
        .right {
            height: 200px;
        }

        .left {
            order: 0;
            width: 200px;
            background: aqua;
        }

        .center {
            order: 1;
            background-color: pink;
            flex: 1;
        }

        .right {
            order: 2;
            width: 200px;
            background: aqua;
        }

  <div class="wrap">
        <div class="content">
            <div class="center">center</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>

1.加载页面时，从上往下加载。
2.布局来看，是先加载center，然后在加载left，right
3.这样就可以实现，先加载出center部分，在执行左右俩边的代码