圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

效果简图如下：

1、圣杯布局

注意middle写在前面就行了，dom结构如下：

DOM:
<body>
<div id="hd">header</div>
<div id="bd">  <div id="middle">middle</div><div id="left">left</div><div id="right">right</div>
</div><div id="footer">footer</div>
</body>

相对应的CSS内容如下：

<style>
#hd{height:50px;background: #666;text-align: center;
}
#bd{/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/    padding:0 200px 0 180px;height:100px;
}
#middle{float:left;width:100%;/*左栏上去到第一行*/    height:100px;background:blue;
}
#left{float:left;width:180px;height:100px;margin-left:-100%;background:#0c9;/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/    position:relative;left:-180px;
}
#right{float:left;width:200px;height:100px;margin-left:-200px;background:#0c9;/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/    position:relative;right:-200px;
}
#footer{    height:50px;    background: #666;    text-align: center;}</style>

2、双飞翼布局

DOM代码如下：

<body>
<div id="hd">header</div>   <div id="middle">    <div id="inside">middle</div>  </div><div id="left">left</div><div id="right">right</div><div id="footer">footer</div>
</body>

双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

CSS代码如下：

<style>
#hd{height:50px;background: #666;text-align: center;
}
#middle{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;}#footer{     clear:both; /*记得清楚浮动*/     height:50px;        background: #666;       text-align: center; } </style>

转载于:https://www.cnblogs.com/pink-chen/p/10582741.html

圣杯布局与双飞翼布局全解相关推荐

圣杯布局和双飞翼布局详解
圣杯布局刚学圣杯双飞翼布局,有点蒙,特写下来加深印象首先要明确圣杯布局和双飞翼布局要解决的问题是什么? 要解决的就是让浏览器先加载最总要的那部分给客户看,我们做前端开发的时候要切合实际场景开发 ...
圣杯布局、双飞翼布局的理解及对比
一.圣杯布局 1.圣杯布局的DOM结构如下: 圣杯特点简单记为:有头.有尾.包三列,圣杯布局中间是有container大容器包裹着左中右区域的. <!--特点:有头.有尾.包三列(有个conta ...
八十九、常见的圣杯布局和双飞翼布局
@Author:Runsen 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式. 圣杯布局圣杯布局是经典的css布局,左右两栏的宽度固定不变,中间那一栏是自适应. 使用弹性盒子布局实现圣杯 ...
经典的三栏布局：圣杯布局，双飞翼布局，flex布局
需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染. 圣杯布局和双飞翼布局的共同特点都是利 ...
[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
[css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现一: section{height: 100%; overflow: hidden;clear:both; } .left{ height: ...
双飞翼布局内容不换行_web前端入门到实战：圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
对于圣杯布局和双飞翼布局的新认识
今天刷题的时候碰见了一道要求使用双飞翼布局的题.于是便对比了一下圣杯布局得到了点新认识. 我们都知道圣杯布局和双飞翼布局都实现了中间宽度自适应,两边定宽的效果.这样做的优势是重要的东西放在文档流前面可 ...
css圣杯布局与双飞翼布局_CSS布局研讨会已于2018年更新
css圣杯布局与双飞翼布局 Yesterday I made live fourteen brand new videos, plus a bunch of updates to existing m ...

圣杯布局与双飞翼布局全解

圣杯布局与双飞翼布局全解相关推荐

最新文章

热门文章