我们先来看一下效果图:
下面来给大家介绍两种方法并且比较他们的不同。(在看这个之前你必须了解浮动,相对定位,清除浮动)
一.圣杯布局
首先来看一下HTML的代码:
header和footer是首行和角标,两个独立的div。
container里面设置三个div分别是main,left,right,至于为什么main不设置在left和right中间下面讲到定位的时候会讲到。
接下来我们一步一步来看css的代码,先注释掉header和footer方便与讲中间三栏式布局:
第一步,设置设置高度和左浮动,代码如图:
(第四步)接下来利用margin的负值让left和right浮动到上一行去,代码:
你会发现中间的main被遮住了,(第五步)那么这首container的padding就起作用了,利用position:relative,定位,代码:
下来打开header和footer的注释,并为footer设置清除浮动(clear:both),(因为container他用了float:left属性,脱离了文档流,不清楚footer的浮动,将盖住上面div)代码如下:
下面粘贴一段完整代码:
二.双飞翼布局
首先还是来看一下HTML代码:
下面看似css代码来解释:双飞翼代码和圣杯第一步是一样的,设置左浮动,没有第二步,双飞翼之所以main中设置一个空的div就是这个原因,不用container的内边距,用空div的外边距,就是设置main-in的margin值,(margin-left和margin-right)下来圣杯第三部设置宽度,第四步也相同,margin的负值,这样就完成啦。看一下main-in的css代码:
来看一下完整代码:
三.区别
需要说明的是圣杯布局用到了container的padding,和position:relative,而双飞翼布局没有用padding他是给HTML设置了一个空的div从而利用它他外边距margin,并为他没有用positive,在属性使用上比圣杯布局简单了很多 。