CSS-两栏布局的六种实现方式

CSS-面试 CSS

创建时间:2019-11-23 16:54

阅读:

1.使用浮动-float
2.使用绝对定位-absolute
3.使用弹性布局-flex
4.使用表格布局-table
5.使用网格布局-grid
6.使用calc()函数

最近面试经常被问，那就赶紧做了一个总结在这里

两栏布局（左侧固定宽度为200px，右侧自适应）

<body>
    <div class='wrap'>
            <div class='left'>左侧固定内容</div>
            <div class='right'>右侧自适应</div>
    </div>
</body>

1.使用浮动-float

/*清除浏览器默认设置的边距*/
* {
   padding: 0;
   margin: 0;
  }
   .wrap {
       overflow: hidden;
       border: 1px solid red;
   }
   /*脱离文档流*/
  .left {
       float: left;      //左边元素向左浮动
       width: 200px;
       height: 200px;
       background: pink;
   }
   .right {
       height: 200px;
       background: skyblue;
   }

注：使用float会使元素脱离文档流，这样会导致两个div发生重叠，而在.wrap中设置overflow: hidden是为了触发BFC，清除浮动（不会重叠）。

2.使用绝对定位-absolute

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    overflow: hidden;
    position: relative;
    border: 1px solid red;
}
/*脱离文档流*/
.left {
    position: absolute;   // 绝对定位
    left: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: pink;
}
.right {
    margin-left: 200px;    // 设置左边距和左边元素等宽
    height: 200px;
    background: skyblue;
}

注：这个实现方案要注意的是.right中设置margin-left: 200px，这里的200px是左边元素的宽。

3.使用弹性布局-flex

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    display: flex;      // 弹性布局 
    border: 1px solid red;
}
.left {
    flex: 0 0 200px;   // 左边元素不扩大不缩小，默认宽度为200px
    height: 200px;
    background: purple;
}
.right {
    flex: 1;          // 右边元素扩大，自动填充过多空间
    height: 200px;
    background: skyblue;
}

注：flex属性要在子元素上设置。flex属性是flex-grow（增长比例）和flex-shrink（缩小比例）和flex-basis（默认大小）的缩写。

4.使用表格布局-table

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    display: table;      // 表格布局
    border: 1px solid red;
    width: 100%;
}
.left {
    display:table-cell;  //设置这个元素为表单中的单元格
    height: 200px;
    width： 200px;
    background: purple;
}
.right {
    display:table-cell;  //设置这个元素为表单中的单元格
    height: 200px;
    background: skyblue;
}

注：表格布局按照我的理解是将父元素设置成一个表格，里面的元素都是一个一个单元格，可以设置几行几列，所以这个方法也可以实现三栏布局（一行三列）；可以设置行高列高。

5.使用网格布局-grid

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    display:grid;   // 网格布局
    grid-template-rows: 200px;  // 设置行高
    grid-template-columns: 200px auto;   // 设置列宽
    border: 1px solid red;
}
.left {
    background: purple;
}
.right {
    background: skyblue;
}

注：grid布局真的太方便啦！！但是放在这里好像有点大材小用了

6.使用calc()函数

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    overflow: hidden;
    border: 1px solid red;
}
.left {
    float: left;
    background: purple;
    height: 200px;
    width: 200px;
}
.right {
    background: skyblue;
    height: 200px;
    width: calc( 100% -200px )
}

注：cala()函数能动态计算出宽度

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达，可以邮件至 610193653@qq.com，谢谢啦！