圣杯布局双飞翼布局认识

作为纯野生的前端小白，当第一次听到圣杯布局的时候是懵逼的，这是什么布局，简直从来没听过。于是乎搜索引擎搜索一番，狂点开十来个页面，看demo，看评论，动手实践demo，最后。。。“圣杯布局从听过到看过”Duang！！！

先贴出我看的文章：
1.这篇思路清晰，一看就清楚了。
http://www.cnblogs.com/imwtr/p/4441741.html

2.这篇是最好的实践，把常用的圣杯布局写在一个DEMO。关键是人家的摘要一句话就把圣杯布局解释清楚了好吗。

【摘要】：经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin> Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句。

http://my.oschina.net/jsan/blog/368543

3.饮水思源，圣杯布局的来历是2006年发在a list part上的这篇文章：
http://alistapart.com/article/holygrail

4.如果你实在是看不懂英文的话，这里有一篇简单的不能再简单的翻译（除去代码相当于没翻译555…..）
http://chen106106.iteye.com/blog/1631865

5.详细的对比解释（慕课网-猿问）
http://www.imooc.com/wenda/detail/254035

6.学习视频（极客学院）
http://www.jikexueyuan.com/course/981.html

好了，最后到这里你应该知道什么叫圣杯布局或者双飞翼布局了，你也从听过到看过了。想要实践的话，我们一起完成这个demo吧！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>圣杯布局&双飞翼布局</title><style>body{background-color: white;text-align: center;font-size: 16px;margin: 0;}#head,#footer{background-color: #cccccc;padding: 20px 0;clear: both;}#container{padding: 0 150px 0 200px;overflow: hidden;min-width: 450px;}.column{float: left;min-height: 200px;position: relative;}#center{width: 100%;background-color: #4cae4c;overflow: visible;}#left{width: 200px;background-color: #6b9cde;margin-left: -100%;left: -200px;}#right{width: 150px;background-color: #a8acaf;margin-left: -150px;right: -150px;}</style>
</head>
<body>
<div id="head">头部</div>
<div id="container"><div id="center" class="column">主内容栏自适应宽度</div><div id="left" class="column">侧栏固定宽度1</div><div id="right" class="column">侧栏固定宽度2</div>
</div>
<div id="footer">底部</div>
</body>
</html>

至此，这个布局就可以实现高度和宽度自适应了！欧耶！

圣杯布局双飞翼布局认识相关推荐

[css] 圣杯布局双飞翼布局
文章目录三栏式布局圣杯布局方法1:使用float布局框架 , 用margin为负值 , position: relative定位分析: 代码: 缺点方法2:calc 方法3: flex布局 ...
【CSS】圣杯、双飞翼布局
[CSS]圣杯.双飞翼布局文章目录 [CSS]圣杯.双飞翼布局圣杯布局基本布局样式接下来要把主区域移动到中间把右区域放在主区域的右边移动左右区域,防止两边挡住中间完整代码双飞翼布局基 ...
主流布局--双飞翼布局
主流布局–双飞翼布局什么是双飞翼布局? 双飞翼布局最早是淘宝团队提出的,是针对圣杯局部优化的解决方案.主要是优化了圣杯布局中开启定位的问题. HTML <div class="par ...
【布局】圣杯布局双飞翼布局
背景随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码 "如果三排布局能将中间的模 ...
HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局
一.三栏式布局顾名思义,即是将主页分成三部分(左,中,右),给左边和右边的块定宽,中间的块占据余下部分.以下是几种常用的实现方法 1.巧用浮动优点:兼容性好,实现简单缺点:必须先写浮动元素,再写 ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局(左列定宽, 右列自适应) DOM结构 <div class="box"><div class="box-left"></ ...
前端布局：圣杯布局/双飞翼布局(两者小小的区别)
今天逛知乎日常搜索了几个关于前端面试的问题,本以为学了react之类的框架就可以放弃css,现在想想自己真是太天真了.老前辈们说过:"Css你可以不把每一个属性全都记住,但是你一定要在你需要 ...
【聊一聊】css中的经典布局——双飞翼布局
上一文,[聊一聊]css中的经典布局--圣杯布局中,我介绍过,圣杯布局不添加额外的标签(主要是只中间块).在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的, ...

圣杯布局双飞翼布局认识

圣杯布局双飞翼布局认识相关推荐

最新文章

热门文章