holygrail(圣杯布局)

圣杯布局(holygrail)

起源

三列。两列固定在两边,中间是一个 流体
圣杯布局的原理是? 简述实现圣杯布局的步骤。双飞翼布局和圣杯布局有什么异同负 margin 的用法

例子

  • 一个简单的仿照例子实现圣杯布局
  • 步骤

1. 建立框架

1
2
3
4
5
6
7
8
9
10
<body>
<!--第一步 建立框架-->
<div id="header"><h1>#header</h1></div>

<div id="container">
<h1>#container</h1>
</div>

<div id="footer"><h1>#footer</h1></div>
</body>

2. 加 column

  • float 让其在 line。再清除 footer 让它在最下面。添加背景颜色和边界便于观察。中间栏要放在前面以优先渲染。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <style>
#container {
padding-left: 200px;
padding-right:150px;
}
#container .column {
float: left;
}
#center {
width:100%;
}
#left {
width:200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
</style>
1
2
3
4
5
6
<div id="container">
<h1>#container</h1>
<div id="center" class="column"><h1>this is center</h1></div>
<div id="left" class="column"><h1>this is left</h1></div>
<div id="right" class="column"><h1>this is right</h1></div>
</div>
  • 效果图 2.1
    step2

3. 将左栏拉到相应位置

  • 要让左栏和中间在一条直线上,先对左栏进行操作,分两步。margin-left:-100%跑到左上角(覆盖主栏目),再设置 position:relative,right:200px 或者 left:-200px(不覆盖主栏目)
    • 第一步
1
2
3
4
5
#left {
width:200px;
margin-left: -100%;
background-color: #555555;
}
  • 效果图 3.1
    step3 * 第二步用相对定位将左栏推开,加上相对定位标志之后,记得给左栏一个right:200px将左栏相对右边 200px,往左推 200px。
1
2
3
4
5
6
#left {
width:200px;
margin-left: -100%;
right:200px;
background-color: #555555;
}
  • 效果图 3.2
    step3_2
    .

4.将右栏加入 line

注意: 原作者这里用的是margin-right:-150px,在演示时并不能起效果。

1
2
3
4
5
#right {
width: 150px
margin-right: -100%;
background-color: #8cacea;
}
  • 效果图 4.1
    step4_1
    再处理一些小细节,固定的右边栏多出的字,撑开了
  • 效果图 4.2
    step4_2

5.结果

result

总结实现步骤

1. div 框架搭建出来,

  • div- >container,header,footer

2. 加 column,

  • 设置float:left
  • 设置center宽度100%
  • 清除footer浮动

3. 将左栏添到 center 左边,

  • margin-left:-100%到左上(覆盖主栏目),
  • 再设置position:relative,right:200px或者left:-200px(不覆盖主栏目)

4. 将右栏添右

  • margin-right: -100%;

圣杯布局和双飞翼布局异同

  1. 两种布局方式都是把主列放在文档流最前面,使主列优先加载
  2. 两者在实现上的相同点在于都让三列浮动,然后通过负外边距形成三列布局;
  3. 两种布局方式的不同在于如何处理中间主列的位置:圣杯布局是利用父容器的左右内边距定位;双飞翼布局是把主列嵌套在 div 后利用主列的左右外边距定位。

浮动元素上的负 margin

给一个浮动元素加上相反方向的负 margin,则会使行间距为 0 且内容重叠。

  • bug 修复 * 当浮动元素使用负 margin 时,在一些旧的浏览器中可能会出现问题。用position:float,能解决很多问题。
  • 具体可以参考 负 margin 用法权威指南

flex 实现的“标准”圣杯布局

MDN

  • 效果图
    step

其他

  • 圣杯布局基本就是(适:自适应,左:左栏,右:右栏)
    _ 左适右
    _ 左右适
    _ 左适、右适
    _ 等等
  • 圣杯布局还有很多的实现方法
    _ 纯浮动实现
    _ flex 实现可以参考,圣杯布局小结,觉得这位作者对圣杯布局总结的挺好,各种小例子。其他的也可以搜一下。我这里主要是介绍下圣杯布局。

  • 圣杯布局类似 * 双飞翼布局 1. left 和 right 覆盖了 center 的左右两边的内容。 2. center 的外部再加一个 div 标签来包裹中间区块, 3. 宽度为 100%。然后再设置 main 的左右外边距,使它回到对应的位置。

参考

In Search of the Holy Grail by Matthew Levine
关于「圣杯布局」 by DotHide
圣杯布局小结 by 流云诸葛
圣杯布局和双飞翼布局 by betterwlf
CSS 之圣杯布局和双飞翼布局 by 宋菲
负 margin 用法权威指南 by Airen 的博客

文章作者: lmislm
文章链接: http://blog.booml.cn/2017/03/25/holygrail/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Baskerville*