css相关内容---三栏布局

「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」

实现三栏布局的方法

这里说的三栏布局是左右两边宽度固定，中间部分的宽度自适应变化。

• 利用定位来实现，首先给父元素设置position:relative,给左边的设置绝对定位，给右边的设置绝对定位，right设置为0，中间部分分别设置margin-left和margin-right,具体代码如下

    .parent {
            height: 100px;
            position: relative;
        }

        .left {
            width: 200px;
            height: 100px;
            background: red;
            position: absolute;
        }

        .right {
            height: 100px;
            background: green;
            position: absolute;
            width: 200px;
            right: 0;
        }
        .center{
            height: 100px;
            background: blue;
            margin-left: 200px;
            margin-right: 200px;
        }

• 利用浮动来实现，左侧设置左浮动，右侧设置右浮动,中间内容分别设置margin-left和margin-right(dom结构的顺序要把center放在最后，要不然right就会出现在第二行，因为center是block)

    .parent {
            height: 100px;
        }

        .left {
            width: 200px;
            height: 100px;
            background: red;
            float: left;
        }
        .center{
            height: 100px;
            background: blue;
            margin-left: 200px;
            margin-right: 200px;
        }
        .right {
            height: 100px;
            background: green;
            width: 200px;
            float: right;
        }

利用浮动的方法center部分的内容会最后才加载，因为html解析是自上而下，而center写在left和right之后

• 圣杯布局实现原理 圣杯布局是利用浮动和负边距来实现三栏布局的，其中父元素要设置左右padding，三列都要设置左浮动（这里要注意，dom结构一定要center写在最前边，宽度设置为100%），这时候left和right都会出现在第二行，通过负margin把它们设置上来，然后再利用相对定位定位到左右两边即可。

     .parent {
            height: 100px;
            padding-left: 200px;
            padding-right: 200px;
        }
        .center{
            height: 100px;
            width: 100%;
            background: blue;
            float: left;
        }
        .left{
            float: left;
            height: 100px;
            background: red;
            width: 200px;
            margin-left:-100% ;
            position: relative;
            left: -200px;
        }
        .right{
            height: 100px;
            width: 200px;
            background: green;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }

• 双飞翼布局实现原理 双飞翼布局其实和圣杯布局差不多，也是利用float和负margin来实现的，不同点在于双飞翼布局不是利用父元素的padding，而是使用center下的content的左右margin来实现，具体代码如下

    .parent {
            height: 100px;
        }
        .center{
            height: 100px;
            width: 100%;
           
            float: left;
        }
        .left{
            float: left;
            height: 100px;
            background: red;
            width: 200px;
            margin-left:-100% ;
        }
        .right{
            height: 100px;
            width: 200px;
            background: green;
            float: left;
            margin-left: -200px;
        }
        .content{
            height: 100px;
            margin-left: 200px;
            margin-right: 200px;
            background: blue;
        }

• flex布局实现三栏 使用flex来实现三栏布局是项目中最常用的，也非常好用，代码简单，问题还少，核心步骤是左右两侧固定宽度，中间部分设置flex：1，代码如下

    .parent {
            height: 100px;
            display: flex;
        }
        .center{
            height: 100px;
            background: blue;
            flex: 1;
        }
        .left{
            height: 100px;
            background: red;
            width: 200px;
        }
        .right{
            height: 100px;
            width: 200px;
            background: green;
        }