css三栏布局

css三栏布局

1.圣杯布局

圣杯概述：父盒子包含三个子盒子（左，中，右）
核心思想：
1. 父盒子设置左右的 margin（或者padding） 来为左右盒子预留留位置；
2. 中间盒子的宽度设置为 width: 100%，实现中间宽度自适应；
3. 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
- .left {margin-left:-100%;} 把左边的盒子拉上去
- .right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去
4. 对左右盒子使用相对定位进行偏移来占据 margin（或者padding）留出的空白，避免中间盒子的内容被左右盒子覆盖；
5. 三个盒子均左浮动！

<!-- 圣杯的 HTML 结构 -->
<!-- 外层包裹 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 实现优先加载-->
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>

css布局：

<style>
    .container {
        margin-left: 120px;
        margin-right: 220px;
    }

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

    .left {
        float: left;
        width: 100px;
        height: 300px;
        margin-left: -100%;
        position: relative;
        left: -120px;
        background-color: blue;
    }

    .right {
        float: left;
        width: 200px;
        height: 300px;
        margin-left: -200px;
        position: relative;
        right: -220px;
        background-color: green;
    }
</style>

2.双飞翼布局

双飞翼概述：父盒子包含三个子盒子（左，中，右），中间的子盒子里再加一个子盒子。
核心思想：