【CSS篇】三栏布局

三栏布局是网页设计中常见的布局方式之一，通常包括一个固定宽度的左侧栏、一个固定宽度的右侧栏和一个自适应宽度的中间内容区。以下是几种实现三栏布局的方法：

1. 绝对定位法

这种方法通过绝对定位来固定左右两侧栏的位置，并通过为中间内容区设置相应的外边距（margin）来避免与两侧栏重叠。

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

2. Flexbox 布局

使用 Flexbox 可以非常简单地实现三栏布局，只需要将容器设为 display: flex;，并为左右两栏指定固定宽度，中间栏使用 flex: 1; 来自动填充剩余空间。

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

3. 浮动法

通过给左右两栏设置浮动属性，并为中间内容区设置适当的外边距来避开两边的栏位。注意，为了确保中间内容区不会被浮动元素覆盖，它应该放在 HTML 结构的最后。

.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

4. 圣杯布局

圣杯布局是一种经典的三栏布局解决方案，它利用浮动和负边距来实现布局。此方法需要在父级元素上设置左右 padding，然后通过相对定位调整左右两栏的位置。

.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;
  float: left;
  margin-left: -100%;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;
  float: right;
  margin-left: -200px;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;
  width: 100%;
  height: 100px;
  background: lightgreen;
}

5. 双飞翼布局

双飞翼布局是对圣杯布局的一种改进，主要是通过为中间列添加额外的包裹层，并通过该包裹层的 margin 来预留左右侧栏的空间，而不是像圣杯布局那样依赖于父元素的 padding。

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;
  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;
  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

每种方法都有其特点和适用场景，选择哪种方法取决于你的具体需求以及你希望如何处理浏览器兼容性和布局灵活性。现代项目中推荐使用 Flexbox 或 CSS Grid 这样的现代布局技术，因为它们提供了更强大且灵活的布局能力。