圣杯布局 VS 双飞翼布局

2018-11-15 本文已影响0人你叫呆小瓜

最近在学习 CSS 布局，看到了这两个经典布局（其实是同一个只是实现方式不同），才发现自己原来对很多 CSS 属性理解的都不够，于是仔细看了这两个布局的实现方式自己动手做了一遍，希望能有更深的理解。

圣杯布局和双飞翼布局都是实现三栏布局的方法，页面整体分为三部分，header、container、footer，其中 container 部分左右定宽，中间自适应，是很常见的布局，效果如下图。

下面分别介绍两种布局的实现原理。

圣杯布局

html 代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Layout Demo</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="header">header</div>
    <div class="container">
      <div class="main">main</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
  </body>
</html>

note：先写 main 部分是因为要先渲染中间部分。

给每一部分加上背景颜色，左右边栏固定宽度100px，中间栏宽度自适应，此时页面长这样：

将 main、left、right 部分都设置左浮动,此时由于中间部分脱离了文档流，footer 就会挤上去，因此需要给 container 加上 overflow: hidden;，保证中间部分的空间留出来。

此时 left 和 right 依旧在下一行，为了使 left 和 right 移上去，则需要缩小 main 部分的宽度，通过 container 的 padding 来设置。设置 container 的左右 padding 为 100px，给 left 加上 margin-left： -100%使其上移一行。

使用相对定位使left 靠左
```
  position: relative;
  left: -100px;
```

同理，将 right 部分上移

  margin-left: -100px;
  position: relative;
  right: -100px;

双飞翼布局

双飞翼布局和圣杯布局在实现思路上大致相同，区别是双飞翼布局在 main 部分外面多了一层 div，利用父层 div 的 margin 值取代了圣杯布局中 container 的 padding，

先回到基础布局的样子

给 main 部分加一个内层 div，三部分（main、left、right）都设置 float: left;， main 部分 width: 100%;， left 和 right 定宽

html 结构如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Layout Demo</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="header">header</div>
    <div class="container">
      <div class="main">
        <div class="inner-main">main</div>
      </div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
  </body>
</html>

为了使 left 和 right 上移需要缩小 main 的宽度，和圣杯布局不同的是，这里通过设置 inner-main 的 margin 来留出位置，同样使用负 margin 来使得 left 和 right 上移（这里不需要使用相对定位）

总结

通过上面两种实现方式可以看出，圣杯布局和双飞翼布局在思路上的区别是：

圣杯布局通过设置主元素的 padding 来为左右栏留出位置，而双飞翼布局是在中间栏增加子元素，通过内层子元素的 margin 来为左右栏留出位置（注意：双飞翼布局中 width 和 float 属性都是设置在外层 div 上的）
圣杯布局中为了使得左右栏分布在最左和最右需要同时使用负 margin 和相对定位实现，而双飞翼布局中不需要使用相对定位

代码示例

圣杯布局 VS 双飞翼布局

圣杯布局

双飞翼布局

总结

猜你喜欢

热点阅读