likes
comments
collection
share

当“三栏”遇上“布局”：一场CSS界的“变形记”

作者站长头像
站长
· 阅读数 22

在Web前端开发中，三栏布局是一种常见的网页结构，尤其在内容丰富的网站上，如新闻门户、博客平台、电商平台等，它能有效组织信息，让用户快速定位所需内容。三栏布局通常包括左侧栏、右侧栏和中间的主要内容区，其中左右侧栏固定宽度，中间内容区自适应剩余空间。在CSS技术不断进步的背景下，实现三栏布局的方式也经历了多次迭代，从最初的表格布局到如今的网格和定位，每种方法都有其适用场景和优缺点。

下面让我们来看看是咋回事儿吧！

当“三栏”遇上“布局”：一场CSS界的“变形记”

一、圣杯布局

圣杯布局是最早期的一种三栏布局解决方案，它的核心思想是在HTML结构上将主要内容放在首位，通过CSS的负margin和绝对定位来调整左右侧栏的位置。这种布局的优点在于可以保证主要内容的优先加载，这对于SEO优化和用户体验都有积极作用。然而，圣杯布局的实现较为复杂，需要精确控制各个元素的尺寸和位置，而且在不同浏览器间的兼容性也是一个挑战。

当“三栏”遇上“布局”：一场CSS界的“变形记”

<head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .page{
      height: 200px;
      font-size: 0;
    }
    .left, .right{
      height: 200px;
      width: 200px;
      background: #1adc20;
    }
    .content{
      height: 200px;
      background-color: #e0c230;
      width: calc(100vw - 400px);
    }
    .page div{
      display: inline-block;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="content">主要内容</div>
    <div class="left">广告位</div>
    <!-- <div class="content">主要内容</div> -->
    <div class="right">广告位</div>
  </div>
</body>

二、双飞翼布局

双飞翼布局可以看作是圣杯布局的变体，它的HTML结构更加简洁，减少了嵌套层级，通过CSS的浮动和margin属性实现布局。与圣杯布局相比，双飞翼布局在实现上更为简单，但在某些情况下，可能会出现布局塌陷的问题，需要额外的清除浮动技巧来解决。

当“三栏”遇上“布局”：一场CSS界的“变形记”

<head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .page{
      height: 200px;
    }
    .left, .right{
      width: 200px;
      height: 200px;
      background: #0ce130;
    }
    .content{
      height: 200px;
      background: pink;
      width: 100%;
    }
    .inner{
      margin: 0 200px;
      height: 100%;
    }
    .page > div{
      float: left;
    }
    .left{
      margin-left: -100%;
    }
    .right{
      margin-left: -200px;
      /* margin-right: 200px; */
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="content">
      <div class="inner">主要内容</div>
    </div>
    <div class="left">广告位</div>
    <div class="right">广告位</div>
  </div>
</body>

三、弹性布局

随着CSS3的普及，弹性布局（Flexbox）成为了实现三栏布局的首选方案。弹性布局通过定义容器的display属性为flex，以及对齐和分配空间的方式，轻松实现了自适应布局。它不仅简化了代码，提高了布局的灵活性，还极大地增强了跨浏览器的兼容性。在弹性布局中，主要内容可以自然地占据剩余空间，左右侧栏保持固定宽度，而且整体布局的调整非常直观。

当“三栏”遇上“布局”：一场CSS界的“变形记”

<head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .page{
      height: 200px;
      font-size: 0;
    }
    .left, .right{
      height: 200px;
      width: 200px;
      background: #1adc20;
    }
    .content{
      height: 200px;
      background-color: #e0c230;
      width: calc(100vw - 400px);
    }
    .page div{
      display: inline-block;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="content">主要内容</div>
    <div class="left">广告位</div>
    <!-- <div class="content">主要内容</div> -->
    <div class="right">广告位</div>
  </div>
</body>

四、表格布局

尽管表格布局在早期被广泛用于页面布局，但随着CSS的发展，它逐渐被淘汰。主要原因在于表格布局不仅难以实现响应式设计，而且对主要内容的优先加载造成了阻碍，不利于搜索引擎优化和用户体验。此外，表格布局在结构和语义上也不符合现代Web标准，因此不再推荐用于布局设计。

当“三栏”遇上“布局”：一场CSS界的“变形记”

<head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .page{
      height: 200px;
      width: 100%;
    }
    .left, .right{
      width: 200px;
      height: 200px;
      background: #1ae216;
    }
    .content{
      height: 200px;
      background-color: #e0c230;
    }
    .page{
      display: table;
      table-layout: fixed;
    }
    .page > div{
      display: table-cell;
    }
    .content{
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="left">广告位</div>
    <div class="content">主要内容</div>
    <div class="right">广告位</div>
  </div>
</body>

五、网格布局

CSS网格布局（Grid Layout）提供了另一种强大的布局方式，它允许开发者通过定义网格线、单元格和区域来灵活安排页面内容。虽然网格布局能够创造出复杂的布局效果，但它同样存在一个问题，即主要内容可能不会优先加载，这在一定程度上影响了性能和SEO。因此，在需要主要内容优先的场景下，网格布局可能不是最佳选择。

当“三栏”遇上“布局”：一场CSS界的“变形记”

<head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .page{
      height: 200px;
      width: 100%;
    }
    .left, .right{
      width: 200px;
      height: 200px;
      background: #1ae216;
    }
    .content{
      height: 200px;
      background-color: #e0c230;
    }
    .page{
      display: grid;
      grid-template-columns: 200px auto 200px;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="left">广告位</div>
    <div class="content">主要内容</div>
    <div class="right">广告位</div>
  </div>
</body>

六、定位

CSS定位（Positioning）包括相对定位、绝对定位和固定定位，可以用来实现三栏布局。其中，固定定位和绝对定位可以用于创建固定的左右侧栏，而中间内容区可以通过相对定位或浮动来实现自适应。尽管定位布局提供了高度的控制能力，但过度依赖定位可能导致布局在不同设备和屏幕尺寸下的表现不稳定，特别是在响应式设计方面。

七、总结

选择哪种布局方式，应当基于项目的具体需求和目标。对于需要主要内容优先加载的场景，圣杯布局和弹性布局是较佳的选择，尤其是弹性布局，因其在简洁性和兼容性方面的优势，成为了现代Web开发中的主流布局方案。随着技术的不断演进，未来或许会有更多创新的布局方式出现，为Web设计带来更多的可能性。在实际开发中，开发者应当灵活运用各种布局技巧，结合项目特点，为用户提供最佳的视觉和交互体验。

转载自:https://juejin.cn/post/7390902948614782988
评论
请登录