双飞翼布局和圣杯布局区别及实现

双飞翼布局和圣杯布局区别

相同点

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。

不同点

主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局是给父元素设置padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使实现，而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容，在给这个中间的div设置margin-left和margin-right 。

本文章以三种更简单的方式实现
float+calc、position+calc、flex布局
推荐flex布局

calc() 使长度值计算更方便

calc()

calc() 函数用于动态计算长度值。

 - 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
 - 任何长度值都可以使用calc()函数进行计算；
 - calc()函数支持 "+", "-", "*", "/" 运算；
 - calc()函数使用标准的数学运算优先级规则；
支持版本：CSS3

实现样式图

通用HTML代码

  <div id="app">
    <header>header</header>
    <main>
      <aside class="left">left</aside>
      <section>center</section>
      <aside class="right">right</aside>
    </main>
    <footer>footer</footer>
  </div>

float+calc

不足点：高度需要自己设置

    * {
      margin: 0;
      padding: 0;
      text-align: center;
    }

    header {
      height: 100px;
      line-height: 100px;
      background-color: rgb(95, 134, 241);
    }
    /* 设置高度，子元素浮动后保持高度 */
    main {
      height: 500px;
      line-height: 500px;
    }

    /* 中间盒子 */
    /* width: calc(100% - 400px); 这里减去的宽度为两侧内容宽度的总和 */
    section {
      float: left;
      width: calc(100% - 400px);
      height: 100%;
      background-color: coral;
    }

    aside {
      float: left;
      /* 两侧盒子和中间盒子全部左浮动 */
      width: 200px;
      height: 80%;

    }

    aside.left {
      background-color: chartreuse;
    }

    aside.right {
      background-color: yellowgreen;
    }

    footer {
      height: 100px;
      line-height: 100px;
      background-color: rgb(15, 166, 242);
    }

position+calc

    * {
      margin: 0;
      padding: 0;
      text-align: center;
    }

    header {
      height: 100px;
      line-height: 100px;
      background-color: rgb(95, 134, 241);
    }

    main {
      position: relative;
      height: 500px;
      line-height: 500px;
    }

    /* 中间盒子 */
    /* width: calc(100% - 400px); 这里减去的宽度为两侧内容宽度的总和 */
    section {
      width: calc(100% - 400px);
      height: 100%;
      margin: 0 auto;
      background-color: coral;
    }

    aside {
      position: absolute;
      /* 两侧盒子相对于父元素绝对布局 */
      width: 200px;
      height: 100%;

    }

    aside.left {
      /* 盒子左侧为0 */
      top: 0;
      left: 0;
      background-color: chartreuse;
    }

    aside.right {
      /* 盒子右侧为0 */
      top: 0;
      right: 0;
      background-color: yellowgreen;
    }

    footer {
      height: 100px;
      line-height: 100px;
      background-color: rgb(15, 166, 242);
    }

flex布局

推荐使用

    * {
      margin: 0;
      padding: 0;
      text-align: center;
    }

    header {
      height: 100px;
      line-height: 100px;
      background-color: rgb(95, 134, 241);
    }

    main {
      height: 500px;
      line-height: 500px;
      /* flex布局 */
      display: flex;
    }

    section {
      width: 100%;
      height: 100%;
      flex-shrink: 1;
      /* flex-shrink: 1; 则空间不足时收缩 */
      background-color: coral;
    }

    aside {
      flex-shrink: 0;
      /* flex-shrink: 0; 两侧盒子固定宽度 */
      width: 200px;
      height: 100%;
    }

    aside.left {
      background-color: chartreuse;
    }

    aside.right {
      background-color: yellowgreen;
    }

    footer {
      height: 100px;
      line-height: 100px;
      background-color: rgb(15, 166, 242);
    }