开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下

正文

效果

前端场景系列之一，这也是一种前端常见布局结构，页面使用度极高，实现两个div，固定一个宽/高，另一个宽/高自适应，不同场景下使用方法也不同，择优选择。

1，宽度固定

2，高度固定

基础

基础属性这里不做详细解释了

学习css布局: zh.learnlayout.com/no-layout.h…

实现

方法1：float

float+BFC 实现

.left {
    width: 200px;
    height: 100%;
    border: 1px solid green;
    float: left;
}
.right {
    height: 100%;
    border: 1px solid red;
    overflow: hidden;
}

方法2：absolute定位

.left {
    width: 200px;
    height: 100%;
    border: 1px solid green;
    position: absolute;
}
.right {
    height: 100%;
    border: 1px solid red;
    margin-left: 200px;
}

方法3 calc(100%-固定内容的宽度或者高度)

动态计算宽高，calc() 函数允许我们进行数学操作，加减乘除

.left {
    width: 200px;
    height: 100%;
    border: 1px solid green;
    float: left;
}
.right {
    height: 100%;
    border: 1px solid red;
    float: left;
    width: calc(100% - 200px);
}

方法4 flex

flex:1 剩余空间等比例分配给子元素

.box {
    display: flex;
}
.left {
    width: 200px;
    height: 100%;
    border: 1px solid green;
}
.right {
    height: 100%;
    border: 1px solid red;
    flex: 1;
}

但是使用flex会有一个注意点：flex布局中设置子元素宽度失效

参考这篇文章：juejin.cn/post/717665…

方法5:使用table和table-cell实现

display: table，作为块元素级的表格，相当于html标签<table>

表格的属性他都可以用

.content {
     border: 1px solid #000;
     width: 100%;
     height: 800px;
     display: table;
 }
 .left {
     width: 200px;
     height: 100%;
     border: 1px solid green;
     display: table-cell;
 }
 .right {
     height: 100%;
     border: 1px solid red;
     display: table-cell;
 }

结语

项目里最常用，比较推荐的方法是3，4，简单高效最稳妥。 刚开始的文章有点粗糙，我相信以后会越来越好的，从基础文章开始，把脑子里的想法都输出出来。