【css】圣杯布局

这是一种比较常见的网站布局，此布局为两边等宽，中间自适应的三栏布局。经常在网站上看到，左边是目录，右边放一些备注啊，广告之类的。

这里主要涉及到float,margin,定位；

1.浮动 float

浮动元素会生成一个块级框，而不论它本身是何种元素;

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。（如图：两个inner浮动后一行排列不下，就会自动换行）

浮动元素不能把未定义宽高的父元素撑开，需要做一步清除浮动的操作
清除浮动增加一个标签，css属性设置 clear: both; 或者父元素 overflow: hidden;

2.外边距 margin

margin-left: 是元素左边框距离父元素左边框的距离

这个正常设置10px等这些具体的值都好理解，但是也可以设置百分比，百分比是相对于父级元素的比例，如下: 父元素灰色的 (200*200)，子元素粉色(100*100)；
当值为负的时候，是距离父元素左边框往左的距离；
margin-left: -100%;是往左偏移父元素宽

3.定位

这里主要了解相对定位（relative）：相对定位元素会相对于它在正常流中的默认位置偏移。

4.圣杯布局

先上代码，然后预览一下效果；

<style>
*{
    box-sizing: border-box;
 }
 
 .main{
    width: 100%;
    height: 100%;
    position: relative;
 }
 .section-con{
    color: white;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0 200px 0px 150px;
    overflow: hidden;
 }
 .section-con div{
    height: 100vh;
    display: block;
    float: left;
 }
 .center{
    width: 100%;
    background: #b4a078;
 }
 .left{
    width: 150px;
    position: relative;
    background: #94b872;

    margin-left: -100%;
    left: -150px;
 }
 .right{
    width: 200px;
    position: relative;
    background: #b87272;

    margin-left: -200px;
    right: -200px;
 }
 .right::after{
    content: '';
    display: block;
    clear: both;
 }
<style>
<body>
<div>
    <div class="section-con">
        <div class="center">中间不定宽的部分</div>
        <div class="left">左边固定150px</div>
        <div class="right">右边固定200px</div>
    </div>
</div>
</body>

主要原理:
**

所有元素，尤其是section-con 先设置box-sizing: border-box;
section-con 需要有左右边距，就是左右栏的宽度
center，left，right全部float，因为center部分宽度100%，然后left和right就会被挤到下面一行；如下图1
先设置left元素，margin-left:-100%; 想左偏移了一个父元素的位置，也就是一个center宽度，那么他就会与center的开始位置重合，如下图2
下一步就是将左边容器，位置往左偏移一个自己的宽度，即定位left:-150px;到此左边容器就定在了最终位置，如下图3
同理做右边容器的设置，margin-left向左偏移一个自己的宽度，那他就跟center的右边框重合了，再利用定位向右移动一个自己宽度，margin-left:-200px; right:-200px;如下图4，5

图1：