两个兄弟盒子，实现右边固定宽度，左边自适应宽度
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
常用的几种方法：
1.position + margin
给右侧盒子绝对定位或者固定定位，并设置宽度，左侧盒子margin-left,值最小为右侧盒子，或者使用css3的calc()自动计算页面剩余宽度并赋值给自适应盒子的宽度。
<style>
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
background-color: pink;
width: 200px;
}
.box1{
/* width: calc(100vw-200px); */ 利用css3的计算属性，自动计算视口剩余宽度和 margin二选一来使用即可
margin-right: 200px;
height: 100vh;
background-color: green;
}
</style>
2.使用flex
给他们的父级设置display:felx,开启flex布局，右边设置固定宽度，左侧盒子设置flex:1,使其宽度就等于父级盒子的剩余空间，从而达到自适应的效果
<style>
body{
display: flex;
height: 100vh;
}
.box1 {
width: 200px;
background-color: pink;
}
.box {
flex:1;
background-color: green;
}
</style>
3.使用float + calc() + overflow 右侧盒子设置float:right,使其浮动到页面最右侧，并设置固定的宽度，左侧盒子开启左浮动，使其浮动到页面最左侧，使用css3的calc()自动计算页面剩余宽度并赋值给自适应盒子的宽度,再给父级设置overflow: hidden，清除浮动带来的影响
<style>
body{
overflow: hidden;
}
.box1 {
float: right;
width: 200px;
height: 100vh;
background-color: pink;
}
.box {
float: left;
width: calc(100vw - 200px);
height: 100vh;
background-color: green;
}
</style>
