解构网页布局的两种经典范式：双飞翼与圣杯

2023-12-07 00:11:23

双飞翼布局

双飞翼布局是网页布局中最简单的一种布局方式，也是最早被使用的布局方式之一。它使用两个浮动的盒子来实现中间盒子的自适应，如图所示：

<div class="wrapper">
  <div class="left-column"></div>
  <div class="middle-column"></div>
  <div class="right-column"></div>
</div>

.wrapper {
  width: 100%;
}

.left-column,
.middle-column,
.right-column {
  float: left;
  width: 33.33%;
}

.middle-column {
  margin-left: 33.33%;
}

特点：

实现简单，代码简洁
浏览器兼容性好
响应式设计友好

缺点：

由于使用了浮动，可能会导致内容重叠或间距不均
对于复杂布局，难以维护

圣杯布局

圣杯布局是一种更为复杂的布局方式，它使用绝对定位来实现中间盒子的自适应，如图所示：

<div class="wrapper">
  <div class="header"></div>
  <div class="left-column"></div>
  <div class="middle-column"></div>
  <div class="right-column"></div>
  <div class="footer"></div>
</div>

.wrapper {
  position: relative;
  width: 100%;
}

.header,
.footer {
  position: absolute;
  width: 100%;
}

.left-column,
.middle-column,
.right-column {
  position: absolute;
  top: 100px;
  bottom: 100px;
}

.left-column {
  left: 0;
  width: 33.33%;
}

.middle-column {
  left: 33.33%;
  width: 33.33%;
}

.right-column {
  left: 66.66%;
  width: 33.33%;
}