这里举的两个例子中，是以左侧为固定宽度，右侧为自适应的宽度。
要实现这样的效果，本质是要实现元素宽度的自适应，而元素宽度自适应有
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;}
当然，除了上述还有其它实现方法，比如通过计算属性设置自适应元素的宽度等，不过相对来说，方法一在代码的简洁性或兼容性上，都会更好些。
