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.双飞翼布局

双飞翼概述：父盒子包含三个子盒子（左，中，右），中间的子盒子里再加一个子盒子。
核心思想：
1. 中间盒子的宽度设置为 width: 100%, 实现宽度自适应；
2. 在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；
3. 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子处在同一行；
4. 三个盒子均左浮动！

<!-- 双飞翼的 HTML 结构 -->
    <!-- 中间的 div 必须写在最前面 优先加载-->
    <div class="middle">
         <div class="middle-inner">中间弹性区</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>

css布局：

<style>
.middle {
float: left;
width: 100%;
}

.middle-inner {
height: 200px;
margin-left: 120px;
margin-right: 220px;
background-color: green;
}

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

.right {
float: left; //（右浮动也可以！）
width: 200px;
height: 200px;
margin-left: -200px;
background-color: blue;
}
</style>

圣杯和双飞翼异同

圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染！

两种方法基本思路都相同：
首先让中间盒子 100% 宽度占满同一高度的空间。当左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整：避免中间盒子的内容被左右盒子遮挡。

因此其主要区别在于：如何使中间盒子的内容不被左右盒子遮挡：

圣杯布局的方法：设置父盒子的 margin（padding） 值为左右盒子留出空位，再利用相对定位对左右盒子调整位置占据 padding 出来的空位；
双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。
简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对定位了，少设置几个属性。

3.flex布局

flex布局概述：使用css3中的display：flex属性进行布局！
核心思想：
1. 利用flex特性使flex-item随着容器大小自适应。
2. 属性知识点：
- order：值是整数，默认为0，整数越小，item排列越靠前。
- flex-grow：定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例。
- flex-shrink：定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。
- flex-basis：表示项目在主轴上占据的空间，默认值为auto。
- flex：是flex-grow、flex-shrink和flex-basis三属性的简写总和。
3. 利用以上属性，即可实现简单三栏布局！

参考理解flex文章：
10分钟入门flex
阮一峰flex布局
三分钟看懂flex
PS:flex还有其他许多属性，在此不一一列举，用到时可参考上述文章查询理解即可！

<!-- flex的 HTML 结构 -->
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css布局

<style>
    .container {
        display: flex;
    }

    .main {
        flex-grow: 1;
        height: 300px;
        background-color: red;
    }

    .left {
        order: -1;
        flex: 0 1 100px;
        margin-right: 20px;
        height: 300px;
        background-color: blue;
    }

    .right {
        flex: 0 1 200px;
        margin-left: 20px;
        height: 300px;
        background-color: green;
    }
</style>

总结：
flex是未来流行的趋势，其功能也十分强大，可适应不同分辨率的屏幕，在移动端表现出色，但存在浏览器兼容问题，且不适合作为页面整体布局的方法！

4.浮动布局

浮动布局概述：采用float属性使实现并行三栏布局。
核心思想：
1. 左右盒子浮动脱离文档流，使其固定在页面的两侧。
2. 中间盒子只给高度和margin值，不给宽度，由盒子撑开。
3. 中间盒子设定左右margin值，留出左右空白位置。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main">
        12321321
    </div>
</div>

css布局

<style>
    .left {
     float: left;
     height: 200px;
     width: 100px;
     background-color: red;
    }
    .right {
     float: right;
     width: 200px;
     height: 200px;
     background-color: blue;
    }
    .main {
     margin-left: 120px;
     margin-right: 220px;
     height: 200px;
     background-color: green;
    }
</style>

总结：
这种布局方法左右浮动固定，中间宽度自适应，代码精简。
缺点是：主要的内容无法优先加载，当页面内容较多时会影响用户体验。

5.绝对定位布局

绝对定位概述：在包裹容器内进行绝对定位，使三部分展示在一行！
核心思想：
1. 父级给相对定位，作为参照。
2. 中间盒子只给高度和margin值，不给宽度，由盒子撑开。
3. 中间盒子设定margin-left和margin-right留出左右空白位置。
4. 左右盒子绝对定位参照父级定位在两边。

<!-- 绝对定位的 HTML 结构 -->
<div id="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css布局

<style>
    #container{
        position:relative;
    }
    .main{
        height: 300px;
        margin:0 220px 0 120px;
        background:green;
    }
    .left{
        position:absolute;
        width: 100px;
        height: 300px;
        left:0;
        top:0;
        background:red;
    }
    .right{
        position:absolute;
        width: 200px;
        height: 300px;
        top:0;
        right:0;
        background:blue;
    }
</style>

总结：这种方法比较常见，简单粗暴。应用的面也比较广，不仅限于三栏布局，其他浮动不能解决，或者较麻烦的布局，都可以采用绝对定位实现。不过此方法虽好，也不要滥用！

浮动和定位布局异同

浮动和定位布局均可实现左右定宽，中间自适应的三栏布局。但浮动布局无法优先渲染中间区域内容，数据体量大时会影响用户体验。

两种方法实现思路类似：
都是让中间盒子只设置左右margin而不设定宽，空出左右盒子位置实现宽度自适应。然后通过固定左右盒子在页面两侧，实现三栏布局。
因此其主要区别在于：实现左右盒子固定的方法

浮动布局采用左右浮动实现页面两侧固定。
定位布局采用绝对定位实现页面两侧固定。

6.BFC布局

BFC布局与浮动布局类似，但在防止覆盖盒子间内容上，采用的方法不同。
核心思想：
1. 左右盒子浮动固定在两侧，且通过设置margin值留出与中间盒子的空隙。
2. 中间盒子不设宽度，自适应大小。通过overflow：hidden来进行溢出隐藏。

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

css布局

    <style>
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-right: 20px;
        background-color: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        margin-left: 20px;
        background-color: blue;
    }   
    .main {
        height: 200px;
        overflow: hidden;
        background-color: green;
    }
    </style>

总结：
方法类似浮动布局，缺点也是无法优先加载中间区块！