CSS一个子元素大小固定，另一个子元素宽度自适应占满父元素

方法一

• 原理：对固定大小的子元素设为float，自适应的子元素通过margin避免两个元素的重叠，利用块级元素具有默认继承父元素宽度的特性

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

方法二

• 原理：利用flex布局实现

.father{
    display: flex;
}
.children1{
   /* flex-shrink: 0; */    
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.children2{
    height: 200px;
    flex-grow: 1;     //占满父元素剩余空间
    background-color: blue;
}

方法三

• 原理：使用calc进行宽度计算

.a{
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.b{
    /*cala运算符左右两侧要有空格 */
    width:calc(100% - 200px); 
    height: 200px;
    margin-left: 200px;
    background-color: blue;
}

PS：面试题常考实现百度搜索框，搜索图标大小固定，input宽度自适应铺满父元素。