前端布局圣经：五种三栏布局实现，面试高频题稳过！

2024-01-08 03:10:18

前端布局圣经：五种三栏布局实现，面试高频题稳过！

在前端开发中，三栏布局是一种常见且实用的设计模式，在各种网站和应用程序中都能看到它的身影。三栏布局通常由三个部分组成：一个居中的主栏和两个侧栏。主栏通常用于显示主要内容，侧栏则用于显示次要内容或导航栏。

实现三栏布局有多种方法，每种方法都有其优缺点。在本文中，我们将介绍五种最常用的三栏布局实现方法：

浮动布局

浮动布局是最早出现的三栏布局实现方法之一。它通过将元素设置为浮动（float）来实现。浮动元素脱离文档流，因此它不会占据任何空间。这使得浮动布局非常灵活，可以轻松实现各种复杂布局。

<div class="container">
  <div class="sidebar1">Sidebar 1</div>
  <div class="main">Main content</div>
  <div class="sidebar2">Sidebar 2</div>
</div>

.container {
  width: 100%;
}

.sidebar1, .sidebar2 {
  float: left;
  width: 300px;
}

.main {
  width: calc(100% - 600px);
}

浮动布局的优点：

灵活，可以轻松实现各种复杂布局
兼容性好，支持所有主流浏览器

浮动布局的缺点：

不太语义化，难以理解和维护
容易出现浮动塌陷问题

弹性布局

弹性布局是CSS3中引入的一种新的布局方式。它通过将元素设置为弹性（flex）来实现。弹性元素可以根据父元素的可用空间自动调整其大小。这使得弹性布局非常适合实现响应式布局。

<div class="container">
  <div class="sidebar1">Sidebar 1</div>
  <div class="main">Main content</div>
  <div class="sidebar2">Sidebar 2</div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.sidebar1, .sidebar2 {
  flex: 0 0 300px;
}

.main {
  flex: 1 1 auto;
}

弹性布局的优点：

语义化，易于理解和维护
响应式，可以轻松实现响应式布局
兼容性好，支持大多数主流浏览器

弹性布局的缺点：

对于旧版本浏览器不支持，需要使用兼容性补丁

Flexbox 布局

Flexbox 布局是CSS3中引入的另一种新的布局方式。它与弹性布局非常相似，但它更强大、更灵活。Flexbox 布局可以通过设置各种属性来控制元素的排列方式和大小。

<div class="container">
  <div class="sidebar1">Sidebar 1</div>
  <div class="main">Main content</div>
  <div class="sidebar2">Sidebar 2</div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.sidebar1, .sidebar2 {
  flex: 0 0 300px;
}

.main {
  flex: 1 1 auto;
}

Flexbox 布局的优点：

强大、灵活，可以控制元素的排列方式和大小
语义化，易于理解和维护
响应式，可以轻松实现响应式布局
兼容性好，支持大多数主流浏览器

Flexbox 布局的缺点：

对于旧版本浏览器不支持，需要使用兼容性补丁

Grid 布局

Grid 布局是CSS3中引入的第三种新的布局方式。它通过将元素放入网格中来实现。网格中的元素可以根据网格的单元格进行排列和调整。

<div class="container">
  <div class="sidebar1">Sidebar 1</div>
  <div class="main">Main content</div>
  <div class="sidebar2">Sidebar 2</div>
</div>

.container {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
}

.sidebar1, .sidebar2 {
  grid-column: 1 / 2;
}

.main {
  grid-column: 2 / 3;
}

Grid 布局的优点：

强大、灵活，可以控制元素的排列方式和大小
语义化，易于理解和维护
响应式，可以轻松实现响应式布局
兼容性好，支持大多数主流浏览器

Grid 布局的缺点：

对于旧版本浏览器不支持，需要使用兼容性补丁

圣杯布局

圣杯布局是一种经典的三栏布局实现方法。它使用了一个嵌套的div结构来实现。圣杯布局的优点是语义化强，易于理解和维护。缺点是实现起来比较复杂，而且对于旧版本浏览器兼容性较差。

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="sidebar1">Sidebar 1</div>
    <div class="main">Main content</div>
    <div class="sidebar2">Sidebar 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100%;
}

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

.content {
  width: 100%;
}

.sidebar1, .sidebar2 {
  float: left;
  width: 300px;
}

.main {
  width: calc(100% - 600px);
}

圣杯布局的优点：

语义化强，易于理解和维护

圣杯布局的缺点：

实现起来比较复杂
对于旧版本浏览器兼容性较差

双飞翼布局

双飞翼布局是一种变种的三栏布局实现方法。它使用了一个嵌套的div结构来实现。双飞翼布局的优点是语义化强，易于理解和维护。缺点是实现起来比较复杂，而且对于旧版本浏览器兼容性较差。

<div class="container">
  <div class="sidebar1">Sidebar 1</div>
  <div class="content">
    <div class="header">Header</div>
    <div class="main">Main content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="sidebar2">Sidebar 2</div>
</div>

.container {
  width: 100%;
}

.sidebar1, .sidebar2 {
  float: left;
  width: 300px;
}

.content {
  width: calc(100% - 600px);
}

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

.main {
  width: 100%;
}