圣杯和双飞翼布局

圣杯和双飞翼布局

圣杯
圣杯布局的原理是什么？
1 设置一个大盒子，大盒子里面有三个小盒子，分别代号名为左中右
2 三个盒子都设置左浮动，左右盒子宽高为固定值比如宽150px,高300px
3 中间盒子设置宽度为100%，高度为360px
4一般要求最先加载中间盒子，所以把中间盒子放在最前面。
现在的样式如下

5给左盒子设置margin-left:-100%;右盒子margin-left:-150px
样式如下

6给最外边大盒子设置padding-left:150px,padding-right:150px

7 给左右盒子分别设置position:relative。一个往左移150px，一个往右移150px。然后中间高度改为300px。

8给最外边大盒子填上overflow:hidden属性，用来清除浮动。
9一句话总结，中间盒子自适应，剩下俩盒子分别通过样式挪到两边。
样式代码

    <style>
        .container{
            padding-left: 150px;
            padding-right: 150px;
            overflow: hidden;
        }
        .center{
            width: 100%;
            height: 300px;
            background-color: red;
            float: left;
            
        }
        .left{
            position: relative;
            left: -150px;
            margin-left: -100%;
            float: left;
            width: 150px;
            height: 300px;
            background-color: green;
            
        }
        .right{
            position: relative;
            right: -150px;
            margin-left: -150px;
            float: left;
            width: 150px;
            height: 300px;
            background-color: green;
        }
    </style>

<div class="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

双飞翼
一
双飞翼布局就是换了种方式实现和圣杯相同的样式。即两个盒子一个左浮动一个右浮动，让中间自适应的盒子的宽度100% 减去两边盒子固定的宽度。
二
这里需要用到一个属性width:calc(100% - 50px); 这是一个对宽度进行设置的例子。意思就是父元素百分百的宽度减去50px剩下的。
三
需要特别注意的是中间减号两边需要有空格！！！！！
需要特别注意的是中间减号两边需要有空格！！！！！
需要特别注意的是中间减号两边需要有空格！！！！！