css常见布局

整理自：干货!各种常见布局实现+知名网站实例分析 - 掘金

1.实现元素水平垂直居中

https://blog.csdn.net/weixin_42182143/article/details/96469276

2.两列布局

（1）一列固定，一列自适应

①float+margin

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

上面的代码实现的左侧已知宽度，右侧自适应。实现右侧固定，左侧自适应自行稍微修改即可。

②float+margin(fix)

左列定宽

    
右列自适应


#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /*正值大于或等于#left的宽度,才能显示在同一行*/
}
#right{
    margin-left: 100px; /*大于或等于#left的宽度*/
    background-color: #0f0;
    height: 500px;
}

③float+overflow

左列定宽
右列自适应


#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*触发bfc达到自适应*/
}

优点：代码简单，容易理解，无需关注定宽的宽度，利用bfc达到自适应效果
缺点：浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷；不支持ie6

这里就涉及到清除浮动的问题了。

留个清除浮动的链接……

④display:table+display:table-cell

    
左列定宽
    
右列自适应


#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    background-color: #0f0;
}
#left,#right{
    display: table-cell;  /*利用单元格自动分配宽度*/
}

缺点：margin无效，不支持ie8-

⑤绝对定位
使用绝对定位定好位置，自适应的那一列width不用写出来

⑥flex实现

    
左列定宽
    
右列自适应


#parent{
    width: 100%;
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    flex: 1; /*均分了父元素剩余空间*/
    background-color: #0f0;
}

⑦grid实现

    
左列定宽
    
右列自适应


#parent {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto;  /*设定2列就ok了,auto换成1fr也行*/
}
#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

（2）一列不定，一列自适应

①float+overflow实现：删掉上文的width即可

②flex实现：删掉上文的width即可

③grid实现：

#parent{
    display: grid;
    grid-template-columns: auto 1fr;  /*auto和1fr换一下顺序就是左列自适应,右列不定宽了*/
}
#left {
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
}

3.三列布局

主要布局和上面两列的差不多，修改细节

（1）两列定宽，一列自适应

①float+margin

②float+overflow实现

③ flex实现

④ grid实现

 grid-template-columns: 100px 200px auto; /*设置3列,固定第一第二列的宽度,第三列auto或者1fr*/

⑤table实现
感觉用的机会不会很多，略掉

其实做成一列固定，另一列自适应，差不多就是以上五种方法了，根据具体要求稍微修改即可。

（2）两侧定宽，中间自适应

以下了解一些经典布局
① 双飞翼布局

    

        
中间自适应
        
  
    
    
左列定宽
    
右列定宽




#header {
    height: 60px;
    background-color: #ccc;
}
#left {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -100%; /*调整#left的位置,值等于自身宽度*/
    background-color: #f00;
    opacity: 0.5;
}
#center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: #eeff2b;
}
#center_inbox{
    height: 480px;
    border: 1px solid #000;
    margin: 0 220px 0 120px;  /*关键!!!左右边界等于左右盒子的宽度,多出来的为盒子间隔*/
}
#right {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使right到指定的位置,值等于自身宽度*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    clear: both;  /*注意清除浮动!!*/
    height: 60px;
    background-color: #ccc;
}

② 圣杯布局

    
    
中间自适应
        

    
    
左列定宽
    
右列定宽




#header{
    height: 60px;
    background-color: #ccc;
}
#parent {
    box-sizing: border-box;
    height: 500px;
    padding: 0 215px 0 115px;  /*为了使#center摆正,左右padding分别等于左右盒子的宽,可以结合左右盒子相对定位的left调整间距*/
}
#left {
    margin-left: -100%;  /*使#left上去一行*/
    position: relative;
    left: -115px;  /*相对定位调整#left的位置,正值大于或等于自身宽度*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    float: left;
    width: 100%;  /*由于#parent的padding,达到自适应的目的*/
    height: 500px;
    box-sizing: border-box;
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    position: relative;
    left: 215px; /*相对定位调整#right的位置,大于或等于自身宽度*/
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使#right上去一行*/
    float: left;
    background-color: #0f0;
    opacity: 0.5;
}
#footer{
    height: 60px;
    background-color: #ccc;
}