经典的实现左边固定宽度，右边宽度自适应的几种方法
- 利用float和margin-left属性（margin-left的值可以稍稍大于或者等于.left的宽度）
.left{
width: 30px;
float: left;
background-color: red;
}
.right{
margin-left: 50px;
background-color: blue;
}
2.利用position和margin属性
.parent{
position: relative;
}
.left{
position: absolute;
left: 0;
width: 50px;
background-color: red;
}
.right{
margin-left: 50px;
background-color: blue;
}
3.flex布局
.parent {
display: flex;
align-items: flex-start;
}
.left {
flex: 0 0 auto;
background-color: red;
}
.right {
flex: 1 1 auto;
background-color: blue;
}
或者也可以使用flex-grow属性，直接在.right上面申明flow-grow属性为1，.right将自动填充剩余的空间
.parent{
display: flex;
}
.left {
width: 50px;
background-color: red;
}
.right {
flex-grow: 1;
background-color: blue;
}