圣杯布局——双飞翼布局（左右固定中间随着宽度变化而变化）

CSS》》
.box {
      height: 300px;
      background-color: aquamarine;
    }
    .left,
    .right {
      width: 200px;
      height: 300px;
      background-color: rgb(98, 184, 11);
      float: left;
    }
    .conten {
      background-color: violet;
//利用计算属性 calc实现动态的宽度变化
      width: calc(100% - 400px);
      height: 300px;
      float: left;
    }

HTML》》
    <div class="box">
      <div class="left"></div>
      <div class="conten"></div>
      <div class="right"></div>
    </div>