【前端】前端的几大经典布局方案

第一种：圣杯布局

具体效果是这样的：

	<!-- 圣杯布局 -->
    <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

这种布局方式是基于浮动的，
首先，设置container的padding左右为200px，即左右块的宽度。
接下来要想让左边绿块到他合适的位置，只能先将他的margin-left设置为 -100%，再将他的position设置为relative，最后再将left设置为-200px。
最后右边的绿块也要设置他的margin-right设置为-200px，这样它就能贴紧center的右边了

第二种：双飞翼布局

具体效果是这样的：

    <!-- 双飞燕布局 -->
    <div class="container">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>

这种布局方式看起来跟圣杯模式没啥区别，但是他们实现的方式是有区别的，前者是center、left、right在一个container内，这样left在浮动的时候第一次只能浮动到center的左上角，而后者直接将container浮动起来了，因为container内只有一个center，这样只用margin-left:-100% 就可以实现left去到左上角，而且right也是相对于container来浮动的，所以就直接margin-left:-200px就OK了。

第三种：CALC

这个CALC是CSS3里边给我们提供的一个计算公式，我们之所以搞出上面的两种布局，说白了还是因为中间的center的宽度是不固定的。我们把center的宽度设置为总宽度减去左、右的宽度和就好了。
注意：因为在CSS3中涉及到计算的话，它的速度是很慢的，所以buyao用这种写法

.center {
	width: calc(100% - 400px);
	min-height: 400px;
	background: #ffa07a;
}

第四种：flex

flex布局还是得把left、center、right放在同一个container里，然后把container的显示方式设置为flex，最重要的是justify-content属性，要设置为space-between，接下来就是设置left、right的大小了，这里flex属性是一个合写的，详情还是参考阮一峰老师的这篇博客：阮一峰老师flex的讲解。
核心代码：

.container {
            display: flex;
            justify-content: space-between;
            height: 100%;
        }
        
        .left,
        .right {
            flex: 0 0 200px;
            height: 200px;
            background: lightblue;
        }
        
        .center {
            flex: 1;
            min-height: 400px;
            background: lightsalmon;
        }

第五种：定位

这种方法虽然放在最后一个，但是我认为他的可用性跟前两种差不多，但是比前两种方便太多了，具体思想是利用center的margin:0 200px; 先把左右两边空出来，然后用定位的方式把left和right贴上去，即：

        .left {
            top: 0;
            left: 0;
        }
        
        .right {
            top: 0;
            right: 0;
        }

这种方式不用浮动

---

以上第一、二、四、五种的源代码我也打包传上来了，可以参考

---

总结：其实这五种布局方案的核心思想就是：左右固定，中间自适应，难点就是当你已经把左右两边的空隙留出来之后，怎么把左右两部分内容再贴上去，基于这个问题演化出了这几种方法。看下来其实并不难