css布局的几种方式

三列布局：

1.利用float+overflow实现

左右定宽度，分布向两边浮动，中间如果没设置溢出处理默认宽度是100%，设置后就会截取两边的宽度从而实现中间自适应

.center{
    height: 30px;
    background: red;
    overflow: hidden;
}
.left{
    width: 100px;
    height: 30px;
    border: 1px solid #000;
    float: left;
}
.right{
    width: 100px;
    height: 30px;
    border: 1px solid #000;
    float: right;
}
//自适应部分要放最后
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>

overflow.png

2.用flex布局实现

左右两边定好宽度后，主要用flex:1来占满剩余空间从而实现中间自适应

    .container{
        width:100%;height:400px;border:1px solid red;
        display:flex;        
    }
    .left{
        width:100px; height:100%;background:gray;
    }
    .middle{
        width: auto;
        height: 100%;
        background: red;
        flex:1;
    }
    .right{
        height:100%;
        width: 100px;
        background:green;       
    }

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

flex.png

3.用Table布局格式实现

使用table不仅可以在实现页面自适应的部分，还可以用table-cell来实现对行锤值对齐

     .container{
        width:100%;height:400px;border:1px solid red;
        display:table;         
    }
    .left{
        width:100px; height:100%;background:gray;
        display:table-cell;
    }
    .middle{
        width: auto;
        height: 100%;
        background: red;
        display: table-cell;
    }
    .right{
        width: 100px;
        height:100%;
        background:green;
        display: table-cell;
    }
    
<div class= "container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div> 
</div>

table.png

4.float+margin实现三列布局
把左右两边的宽度固定然后左右浮动，中间自适应部分用margin：0 和左右两边的宽度

左右两栏利用中间的margin挤出空间，左侧向左浮动，右侧向右浮动，中间不设置宽度，随着屏幕的缩小，左右两栏的宽度会保持不变，中间的宽度会减小。

    .center{
        height: 30px;
        background: red;
        margin: 0 100px;
    }
    .left{
        width: 100px;
        height: 30px;
        float: left;
        background-color: yellow;
    }
    .right{
        width: 100px;
        height: 30px;
        float: right;
        background-color: yellow;
    }
//注意中间自适应的要放在最后面
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>

float.png

5.定位absolute实现中间自适应

左右两栏设置为绝对定位，将脱离文档流，中间部分利用margin挤出左右两栏的空间，当窗口缩小时，左右两栏宽度不变，中间一栏的宽的减小。

给左右两边设置相对定位，并分别设置距离页面距离为0，中间自适应部分通过margin：0 左右宽度来自适应

  *{
        margin: 0;
        padding: 0;
    }
    .center{
        height: 30px;
        background: red;
        margin: 0 100px;
    }
    .left,.right{
        width: 100px;
        height: 30px;
        position: absolute;
        background-color: blue;
    }
    .left{
        left: 0;
    } 
    .right{
        right: 0;
    }
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>

6.Grid网格布局

高度由内容撑开，若设置了任意一栏的高度，则其余两栏的高度会随之变化。

主要是使用grid-template-columns这一属性时中间的盒子自适应，这一属性定位列属性，比如要定义三列就写3个数值，每个数值代表每一个项目的宽度，auto是自适应占满剩余空间

   *{
        margin: 0;
        padding: 0;
    }
    .content{
        display: grid;
        width: 100%;
        grid-template-rows:100px;
        grid-template-columns:300px auto 300px; /* 设置列数属性 */
    }
    .center{
        background: red;
    }
    .left,.right{
        background-color: blue;
    }
<div class="content">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>

grid.png

6.圣杯式布局

 *{
    margin: 0;
    padding: 0;
}
.header, .footer {
    border: 1px solid #333;
    background: #ccc;
    text-align: center;
}
.footer {
    clear: both;
}
.container {
    padding:0 220px 0 200px;
    overflow: hidden;
}
.left, .middle, .right {
    position: relative;
    float: left;
    min-height: 130px;
}
.middle {
   width: 100%;
    background: blue;
}
.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: red;
}
.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
}

<header class="header">header</header>
    <div class="container">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>  
    </div>
<footer class="footer">footer</footer>

圣杯.png

7.双飞翼布局（与圣杯类似）

      *{
            margin:0;
            padding: 0;
        }
        .main>div{
         float: left;
        }
        .left {
            width: 200px;
            background: red;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            background: blue;
            margin-left: -200px;
        }
        .middle{
            width: 100%;
            background: yellow;
        
        }
        .content{
            margin-left: 200px;
            margin-right: 200px;
        }

<div class="main">
    <div class="middle">
        <div class="content">
            中间
         </div>
    </div>
    <div class="left">
        左边
    </div>
    <div class="right">
        右边
    </div>
</div>

双飞.png

等高布局

伪等高之-负margin和padding

*{
    margin:0;
    padding: 0;
}
.parent{
    position: relative;
    overflow:hidden;
    color: #efefef;
}
.center,
.left,
.right {
    box-sizing: border-box;
    float: left;
}
.center {
    background-color: #2ECC71;
    width: 60%;
}

.left {
    width: 20%;
    background-color: #1ABC9C;
}
.right {
    width: 20%;
    background-color: #3498DB;
}
.left,
.right,
.center  {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
<div class="layout parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
        </div>
        <div class="right"><p>right</p></div>
        <div style="clear: both;">11111111111</div>
    </div>

等高.png