圣杯布局和双飞翼布局是经典的三栏式布局,同时也是我们面试中的常客,他们效果相同,都是左栏和右栏固定长度,中间栏宽度自适应。在HTML结构上中间栏在浏览器里优先渲染。圣杯布局和双飞翼布局有着相似的思路,但是在某些细节上也有不同点。下面简单介绍下。本篇首先详解下圣杯布局,下一篇再介绍双飞翼布局
圣杯布局
HTML部分
首先,我们建立好左中右三栏,因为中间栏需要优先渲染,我们将其放在最前面。
<header>圣杯布局</header> <div class="bd"> <div class="main text"> main </div> <div class="left text"> left </div> <div class="right text"> right </div> </div> <footer style:"clear:both">footer</footer>
CSS部分
<style> * { padding: 0; margin: 0; } body { min-width: 600px; } header, footer { text-align: center; width: 100%; background-color: #bbbbbb; } .text { text-align: center; line-height: 200px; font-size: 40px; color: #fff; } .bd { overflow: hidden; padding: 0 200px 0 200px; } .main { float: left; width: 100%; height: 200px; background-color: #ddd; } .left { float: left; width: 200px; height: 200px; background-color: #da4242; /* 产生布局效果的属性 */ margin-left: -100%; position: relative; left: -200px; } .right { /* opacity: 0.5; */ float: left; width: 200px; height: 200px; background-color: #4ddef1; /* 产生布局效果的属性 */ margin-left: -200px; position: relative; left: 200px; } </style>
逐步解析
1.给中间栏main设置width:100%,让它始终占满窗口,这样才有自适应的效果。设置背景颜色
2.给左右两个栏固定width和height。设置背景颜色
效果如下:
3.给三个栏设置左浮动;float:left(注意清除浮动,因为浮动会导致父元素高度塌陷)
4.这里开始是重头戏了,我们使用到强大的负外边距了,我们先处理左栏,因为中间栏的宽度为100%,所以左栏被挤到下面去了。现在left要到最左边的位置,所以我们在left的样式下输入:margin-left:-100%;
5.同理,接下来让right到main的右边,只需要设置margin-left的值为负的right的宽,使main重叠right的宽度,因为设置了浮动所以right就会到main的右边。
6.经过上诉几步,乍看之下觉得可以了,实则不然。当我们给中间输入很多内容时,因为三个方块都是设置的浮动,脱离的文档流,两边固定宽度的两栏会挡住我们的内容。
我们给左栏不设置透明,右栏设置opacity: 0.5;
效果如下:
所以要想两边不遮挡内容,就需要中间栏给两边的位置腾出来。我们可以想到padding
和margin
都可以用来腾出位置,这两个属性就是圣杯布局的双飞翼布局的区别
7.为三个栏的父元素设置padding属性腾开位置
8.为使两边不留白,给左右栏设置position:relative;再挪动位置
9.至此圣杯布局就已经完成,至于双飞翼布局可以看我那篇《双飞翼布局》