css实现一侧固定宽度，另一侧宽度自适应

这里举的两个例子中，是以左侧为固定宽度，右侧为自适应的宽度。

要实现这样的效果，本质是要实现元素宽度的自适应，而元素宽度自适应有

1、使用行块级元素宽度默认继承父元素宽度，如div

2、设置块元素的宽度为父元素的100%

3、还有一个可能比较少了解的，就是对绝对定位的元素设置left：0和right：0就可以使得元素的宽度展开到父元素的宽度（如果元素的宽度未设置具体宽度）

4、flex弹性布局

如归要实现一侧的宽度自适应，上述中2显然不合适。

html部分的代码：

<div class="box">
    <div class="a">固定宽度的一侧</div>
    <div class="b">自适应的一侧</div>
</div>

方法一：对固定宽度的元素设置float，自适应的一侧（块级元素）通过margin避免两元素的重叠，本质还是利用块级元素具有默认继承父元素宽度的特性。

.a{
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.b{
    height: 200px;
    margin-left: 200px;
    background-color: blue;
}

方法二：对自适应元素设置absolute定位，通过left： 0， right： 0对自适应元素进行宽度拉伸，再通过设置margin-left避免元素重叠

.box{
    position: relative;
}
.a{
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.b{
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin-left: 200px;
    background-color: blue;
}

方法三：flex布局

.box{
    display: flex;
}
.a{
   /* flex-shrink: 0; */    
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.b{
    height: 200px;
    flex: 1;
    background-color: blue;
}

当然，除了上述还有其它实现方法，比如通过计算属性设置自适应元素的宽度等，不过相对来说，方法一在代码的简洁性或兼容性上，都会更好些。