那些我们不应该忘记的经典页面布局方案——圣杯布局&双飞翼布局

       随着css3的普及,我们前端开发人员在绘制页面的时候有了更省时省心省力的方式。就比如要实现一个左、中、右的三列布局,我们有不下于五种的解决方案,flex布局表格布局Grid布局以及今天我们要将到的圣杯布局双飞翼布局。

       圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。

一、圣杯布局

1、布局原理

       圣杯布局中,我们主要使用到了负margin并结合relative相对定位,同时也涉及到了float脱离文档流排版布局的相关知识。为了让中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。

<style>
#bd{
    padding: 0 200px 0 180px;
    height: 100px;
 }
#middle{
   float: left;
   width: 100%;
   height: 500px;
   background:blue;
}
 #left{
   float:left;
   width:180px;
   height:500px;
   margin-left:-100%;
   background: #0c9;
   position: relative;
   left: -180px;
}
 #right{
   float: left;
   width: 200px;
   height: 500px;
   margin-left: -200px;
   background: #0c9;
   position: relative;
   right: -200px;
}
</style>
<div id="bd">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>

       注意负margin的使用,.left射者了margin-left:-100%,这里的100%是指负元素的width,因为父元素#bd的width是auto自适应屏幕,所以.left元素就会直接向左移动到#bd元素的的最左端,注意:不是屏幕的最左端,然后我们又给.left元素添加了.relativeleft想对定位元素,所以.left自然就左移到屏幕的最左边了!对于.right元素位置分析,可以采用相同的分析方法。

       那么,为什么我们要设置负margin呢?因为,.left,.middle,.right均设置了float:left,所以它们三个元素都会脱离文档流,但是仍然排在同一层文档上面,所以左右要通过负margin进行位置的移动。

       还有一点需要注意的就是HTML代码结构的顺序,.middle一定要排在.left,.right的上面,这是整个布局逻辑的基础,重要指数5颗🌟

2、优缺点

       优点:不需要添加dom节点。

       缺点:圣杯布局的缺点:正常情况下是没有问题的,但是特殊情况下就会暴露此方案的弊端,如果将浏览器无线放大时,「圣杯」将会「破碎」掉。如图:当middle部分的宽小于left部分时就会发生布局混乱。(middle<left即会变形,这个您需要脑补一下,一般人也不会这么操作的)

二、双飞翼布局

       双飞翼布局是淘宝团队提出来的一种布局,是圣杯布局的改进,通过给.middle添加一个子节点.inside来防止页面被放大之后,页面的错乱。其缺点就是多增加了一层div

<style>
#center{
   float:left;
   width:100%;/*左栏上去到第一行*/     
   height:100px;
   background:blue;
}
#left{
  float:left;
  width:180px;
  height:100px;
  margin-left:-100%;
  background:#0c9;
}
#right{
   float:left;
   width:200px;
   height:100px;
   margin-left:-200px;
   background:#0c9;
}
/*给内部div添加margin,把内容放到中间栏,其实整个背景还是100%*/ 
#inside{
   margin:0 200px 0 180px;
   height:100px;
}
</style>

<div id="center">
     <div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>

       双飞翼布局理解起来比较简单,如果你能够理解圣杯布局,那么理解双飞翼布局就完全不在话下。此处就不在进行多余的解释,至于其优缺点,前面已经介绍过了。如果您有时间,可以使用Grid网格布局实现,相关资料可以查看阮一峰老师的《Grid布局》
       最后感谢您的阅读。祝您学习进步!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容