Css之圣杯布局和双飞翼布局

圣杯布局和双飞翼布局是我再一次京东面试中听到的词汇,简单来说,这种布局其实都是我们CSS+div布局的入门级,但是大家肯恩都不知道这个名词,高大上的名词一般都会显示你的知识面及专业度

闲话不多说,原理讲起来:

事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。

圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。一起来看看淘宝的头部实现

Css之圣杯布局和双飞翼布局

通过缩放页面就可以发现，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响我们的浏览。注意：当你缩放页面的时候，宽度不能小于700PX，为了安全起见，最好还是给body加一个最小宽度!

那么了解原理了,我们来看看实现的布局方法吧

第一步:来看下HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <header><h4>Header内容区</h4></header>
  <div class="container">
        <div class="middle"><h4>中间弹性区</h4></div> 
        <div class="left"><h4>左边栏</h4></div> 
        <div class="right"><h4>右边栏</h4></div>
 </div>
 <footer><h4>Footer内容区</h4></footer>

</body>
</html>

这里注意下写法,一定要将中间盒子写在前面,因为要优先渲染.

第二步：给出每个盒子的样式

 <style>
        header{width: 100%;height: 40px;background-color: #BFFFEF;}
        .container{ height:200px;overflow:hidden;}
        .middle{width: 100%;height: 200px; background-color: #080;float:left;}
        .left{ width: 200px;height: 200px;background-color: #017;float:left;}
        .right{width: 200px;height: 200px;background-color: #601;float:left;}
        footer{width: 100%; height: 30px;background-color: #FFBFFF}

</style>

第三部:看此时的效果图

Css之圣杯布局和双飞翼布局

此时的left和right已经被挤到下边了,因为container盒子的高度是限制的,那么如果没有限制的话

Css之圣杯布局和双飞翼布局

大家可以看到，三栏并没有在父元素的一行显示，就是因为中间盒子我们给了百分之百的宽度。所有左右两个盒子才会被挤下来.

那么如何让它们呈现出一行三列的效果呢？那就要让左边的盒子要到中间盒子的最左边，右边的盒子到中间盒子的最右边。换个想法，如果中间盒子不是100%的宽度，那么按照文档流，左边的盒子一定会在中间盒子的后面显示，接着显示右边的盒子。但是现在中间盒子是满屏了的，所以左右两个盒子被挤到下一行显示。我们要做到的是让左右两个盒子都上去。此时，CSS的负边距(negative margin)该上阵了。

第四部:利用负边距

1.让左边的盒子上去

需要设置其左边距为负的中间盒子的宽度，也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动

2.让右边的盒子上去

需要设置其左边距为负的自己的宽度，也就是.right {margin-left：-200px;}。这样右盒子才可以在一行的最右边显示出自己

第五步：看此时的效果图
Css之圣杯布局和双飞翼布局

到这里，是不是感觉很有成就感？但是很遗憾的告诉你，还没结束哦！
我们现在的确是硬性的实现了固比固布局。但是要记住，中间盒子是自适应的宽度，所以中间盒子里的内容会被左右盒子给压住一部分。
比如现在我给中间盒子加很多的内容，大家看看效果图

Css之圣杯布局和双飞翼布局

所以，我们的工作还没停止。

第六步：让中间自适应的盒子安全显示

首先:利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤

在外层盒子container中加入：

.container{
padding: 0 200px;}

这里的200px是左右盒子的宽度。
效果如下:

Css之圣杯布局和双飞翼布局

我们可以看到，左右两边的内边距是有了，但是中间盒子上的内容还是被压着。

其次:给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值

代码如下：
.left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;}

第七步：看最终效果图

Css之圣杯布局和双飞翼布局

现在，圣杯布局终于搞定了，也实现了我们要的效果，左右侧的盒子固定，中间盒子自适应，而且中间盒子的内容完全不受影响。

整体代码看一下

Css之圣杯布局和双飞翼布局

Css之圣杯布局和双飞翼布局

1.让左边的盒子上去

2.让右边的盒子上去

相关推荐