实现3列布局，左右固定100px，中间自适应占满剩余位置

// 设置font-size: 0 主要是因为第三种方法将p元素设置成了行内元素，而HTML代码中的回车换行被转成一个空白符，元素之间就会出现空隙
<div class="wrap" style="font-size: 0">
      <p class="first"></p>
      <p class="second"></p>
      <p class="third"></p>
</div>

*{
    padding: 0;
    margin: 0;
}

1.display布局

.wrap{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
}
.first{
    width: 100px;
    height: 100%;
    background-color: yellow;
}

.third{
    width: 100px;
    height: 100%;
    background-color: yellow;
}

2.position: absolute 固定定位

.wrap{
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: bisque;
}
.first{
    width: 100px;
    height: 100%;
    background-color: yellow;
    position: absolute;
    left: 0;
}
.third{
    width: 100px;
    height: 100%;
    background-color: yellow;
    position: absolute;
    right: 0;
}

3.calc()宽度计算

.wrap{
    width: 100%;
    height: 100vh;
    background-color: rgba(223, 234, 11, 0.676);
}
.first{
    width: 100px;
    height: 100%;
    background-color: #e4a9e4c3;
}
.second{
    width: calc(100% - 200px); // 减号前后要空格不然不生效
    height: 100%;
    background-color: rgb(212, 105, 122); 
    margin: 0;
}
.third{
    width: 100px;
    height: 100%;
    background-color: #e4a9e4c3;
}
p{
    display: inline-block;
}