两栏布局

两列布局的几种方法

html结构

 <div class="content">
      <div class="content-left">
        左侧固定200px
      </div>
      <div class="content-right">
        右侧自适应
      </div>
 </div>

1.通过float和margin-left

 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content{
        overflow: hidden;
      }
      /* 脱离文档流 */
      .content-left {
        float: left;
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
        /* 通过margin-left将左边位置空出 */
        margin-left: 200px;
        background: blue;
        height: 200px;
      }

2.通过 position: absolute;绝对定位

 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
        position: relative;
      }
      /* 脱离文档流 */
      .content-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
        /* 通过margin-left将左边位置空出 */
        margin-left: 200px;
        background: blue;
        height: 200px;
      }

3.通过flex弹性布局

/* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
        display: flex;
      }
      .content-left {
          /* 除了width: 200px;还可以flex-basis: 200px; */
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
          /* flex:1;将剩余空间分给它 */
        flex: 1;
        background: blue;
        height: 200px;
      }

4.通过 display: table;表格布局

 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
        display: table;
        /* 必须给父级定宽不然自适应盒子没定宽只会由内容撑开 */
        width: 100%;
      }
      .content-left {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
        display: table-cell;
        background: blue;
        height: 200px;
      }

5.通过inline-block和calc（）函数

 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        /* 必须加font-size=0;把inline-block默认间距去掉，
        不过设置后里面文字不显示了可以给里面块设置font-size:20px;
        或者把两个块之间的换行删掉也能去掉间距*/
        font-size: 0;
        overflow: hidden;
      }
      .content-left {
        font-size: 20px;
        display: inline-block;
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
        font-size: 20px;
        display: inline-block;
        background: blue;
        height: 200px;
        /* 注意calc里的运算符两边要有空格 */
        width: calc(100% - 200px);
      }

6.通过float和calc()函数，左右两块都要浮动

 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
      }
      .content-left {
        float: left;
        width: 200px;
        height: 200px;
        background: red;
      }
      .content-right {
        float: left;
        background: blue;
        height: 200px;
        /* 注意calc里的运算符两边要有空格 */
        width: calc(100% - 200px);
      }

7.使用grid布局

 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
        display: grid;
        grid-template-columns: 200px 1fr;
        /* grid布局也有列等高的默认效果。需要设置: align-items: start;。 */
        align-items: start;
      }
      .content-left {
        height: 200px;
        background: red;
        /* grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候，
        grid布局默认是box-sizing设置的盒宽度之间的位置。
        而flex则是使用两个div的border或者padding外侧之间的距离。 */
        box-sizing: border-box;
        grid-column: 1;
      }
      .content-right {
        background: blue;
        height: 200px;
        box-sizing: border-box;
        grid-column: 2;
      }