三种方式实现圣杯布局

上一篇写了双飞翼布局，这篇我就写下他的兄弟圣杯布局吧~
圣杯布局也是实现三栏布局的方法，左右定宽，中间自适应，中间内容优先加载。
最原始的圣杯布局是通过负边距、左浮动、相对定位、内边距实现的，然后我在实践中也发现了另外两种实现方式，分别是通过怪异盒模型和flex布局

HTML

HTML结构都是相同的，我先放在这里

  

    
main
    
left
    
right
  

CSS

我们先看下最祖先的方式吧
通过负边距、左浮动、相对定位、内边距实现
1.首先给main一个100%宽度，left和right分别给一个固定的宽度，三者高度和父盒子一样高，都实现左浮动
效果如下，由于main宽度已经撑满了整个父盒子，left和right被挤到父盒子下面

所以我们要让left和right上去
2.使用负边距，给left添加margin-left：-100%（向左移动一个父盒子的宽度），给right添加一个负right宽度的左边距（向左边移动一个right盒子的宽度）
可以看到left和right成功移动到我们想到的位置了

但有个问题main盒子的内容被left和right挡住了，所以我们要让main盒子的内容在left和right之间显示
3.给container一个左右的padding试下

left和right还是阴魂不散，main还是被挡住了
4.给left和right来个相对定位，让left向左移动，rght向右移动试试吧

嗯，是的，就是酱紫的滴，应该没有什么大问题了，收工收工~

完整的CSS

 /* 使用浮动、负边距、内边距、相对定位实现 */
    .container {
      height: 300px;
      background-color: black;
      overflow: hidden;
      padding: 0 200px;
      min-width: 800px;
    }

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

    .left {
      width: 200px;
      height: 300px;
      background-color: pink;
      float: left;
      margin-left: -100%;
      position: relative;
      left: -200px;

    }

    .right {
      width: 300px;
      height: 300px;
      background-color: red;
      float: left;
      margin-left: -300px;
      position: relative;
      right: -300px;
    }

其他两种方式

怪异盒模型

使用怪异盒模型的区别就是这里不需要用定位，在mian上加padding替代container上的padding，然后将mian修改为怪异盒模型 box-sizing: border-box，我试了下效果是一样滴

    /* 使用浮动、负边距、内边距、怪异盒模型实现 */
    .container {
      height: 300px;
      background-color: black;
      overflow: hidden;
      min-width: 800px;
    }

    .main {
      width: 100%;
      height: 300px;
      background-color: blue;
      float: left;
      padding: 0 300px 0 200px;
      box-sizing: border-box;
    }

    .left {
      width: 200px;
      height: 300px;
      background-color: pink;
      float: left;
      margin-left: -100%;
    }

    .right {
      width: 300px;
      height: 300px;
      background-color: red;
      float: left;
      margin-left: -300px;
    }

flex

这个不得了了，什么浮动、内边距、外边距、怪异盒模型统统都不要，一个flex搞定，给父盒子一个display：flex，left和right给固定的宽度，main来个flex：1自适应，给left盒子一个order：-1，让他排在最左边，毕竟html结构我们是不能改变滴。

    /* 使用弹性盒模型实现圣杯模型 */
    .container {
      height: 300px;
      background-color: black;
      overflow: hidden;
      min-width: 800px;
      display: flex;
    }

    .main {
      flex: 1;
      height: 300px;
      background-color: blue;
    }

    .left {
      width: 200px;
      height: 300px;
      background-color: pink;
      order: -1;
    }

    .right {
      width: 300px;
      height: 300px;
      background-color: red;
    }

OKK，bye~