?两栏布局如何实现？各有什么优缺？

这是我参与更文挑战的第29天，活动详情查看： 更文挑战

面试官:我问问CSS吧，你掌握的怎么样？

我：还可以吧

面试官:那你给我写个圣杯布局吧

我：额，不会。

面试官:那问个简单的吧，你实现一个两列布局吧，左边一栏宽度固定，右边一栏宽度自适应

我：….??????（起飞）

两栏布局的实现

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现

利用浮动

原理：将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

.outer {
  height: 100px;
}
.left {
  float: left;
  height: 100px;
  width: 200px;
  background: red;
}
.right {
  margin-left: 200px;
  width: auto;
  height: 100px;
  background: gold;
}
复制代码

利用flex

原理：将左边元素的放大和缩小比例设置为0，基础大小设置为200px。将右边的元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。

.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: red;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

复制代码

利用绝对布局

方案一

原理：利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
}
.right {
  margin-left: 200px;
  height: 100px;
  background: gold;
}
复制代码

方案二
原理：利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  height: 100px;
  background: red;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}
复制代码

利用table布局

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 表格布局 */
.wrap {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    display: table-cell;
    background: skyblue;
    height: 200px;
}
复制代码