关于圣杯布局——浮动&负margin以及calc

圣杯布局的特点是两边定宽，中间自适应。

传统的布局方法

html结构

比如下面的html，

<style>
       header,footer{
            background-color: mediumaquamarine;
        }
        .main{
            background-color: blanchedalmond;
        }
        .left{
            background-color: azure;
        }
        .right{
            background-color: aqua;
        }
</style>
<header>Header</header>
<div class="bd">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<footer>Footer</footer>

初始化结构

设置宽度

首先我们给他们赋予宽度，设定左边100px,右边80px，中间的自适应，所以我们就给100%宽，然后利用父元素的padding给设定left为100px,right为80px.

 <style>
        header,footer{
            background-color: mediumaquamarine;
        }
        .bd{
            padding-left: 100px;
            padding-right: 80px;
            overflow: hidden;
        }
        .main{
            background-color: blanchedalmond;
            width: 100%;
            float: left;
        }
        .left{
            background-color: sandybrown;
            width: 100px;
            float: left;

        }
        .right{
            background-color: aqua;
            width: 80px;
            float: left;
        }
</style>

设定宽度

负margin和浮动调整位置

负margin可以让元素重叠，如果是左边的margin,那就和左边重叠，这里要注意一点，就是margin的百分比，如果是left和top，那么被百分比的主体是前面的元素。
比如这里的left，我们给添加一个

.left {
 margin-left: 100%;
}

你会发现，它有右移了一个main的宽度，而不是自身的宽度

所以我们给left一个100%的负margin以及right一个它自身宽度的margin，让他们到上面来。

.left {
 background-color: sandybrown;
 width: 100px;
 float: left;
 margin-left: -100%;
}
.right {
 background-color: aqua;
 width: 80px;
 float: left;
 margin-left: -80px;
}

偏移以后

relative偏移

看到他们离目标位置，都只剩下一个自身了。relative和left，right可以在原来的位置上偏移，所以下面就很简单了

.left {
 background-color: sandybrown;
 width: 100px;
 float: left;
 margin-left: -100%;
 position: relative;
 left: -100px;
}
.right {
 background-color: aqua;
 width: 80px;
 float: left;
 margin-left: -80px;
 right: -80px;
 position: relative;
}

最终结果

利用calc来布局

页面格式就正常的来

<header>Header</header>
<div class="bd">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right
    </div>
</div>
<footer>Footer</footer>

然后设置主元素overflow,里面的元素float

<style>
    header,footer{
        background-color: mediumaquamarine;
    }
    .bd{
        overflow: hidden;
    }
    .main{
        background-color: blanchedalmond;
        float: left;
    }
    .left{
        background-color: sandybrown;
        float: left;
    }
    .right{
        background-color: aqua;
        float: left;
    }
</style>

然后设置宽度

<style>
    header,footer{
        background-color: mediumaquamarine;
    }
    .bd{
        overflow: hidden;
    }
    .main{
        background-color: blanchedalmond;
        float: left;
        width: calc(100% - 80px - 100px );
    }
    .left{
        background-color: sandybrown;
        float: left;
        width: 100px;
    }
    .right{
        background-color: aqua;
        float: left;
        width: 80px;
    }
</style>

有时候觉得，奇淫技巧的原因在于时代问题吧。起码时代变得越来越好吧。