开始,我们就来说一说最简单的
居中布局问题。
居中布局是再常见不过的布局了。
一个固定宽度的<div>居中,两边留白。
实现<div>居中很简单,常用的有两种方法,下面就一一说一说这两种方法:
【方法一】
大家都比较熟悉了,使用margin属性,将水平空白边设置为auto,
举个栗子:
<body>
<div id="header" class="wrap">
</div>
</body>
这个例子中,由于网页中header、content、footer什么的一般都要居中,所以定义了wrap类,对wrap类设定统一宽度和居中就好了。为了好显示,我给header加上了高度和背景色。下面是CSS:
.wrap { width: 960px; margin: 0 auto; }
#header { height: 100px; background-color: #85c155; }
现实结果如下图
这看上去好像没问题了,绝大多数网上的笔记、教程上面都是这样写的,
但是我们不得不考虑另外一些问题,比如下面两个问题:
问题一:
margin: 0 auto,在指定了水平白边的同时,给出了垂直的白边,为0,也就是0px
这有一个问题,我们在打代码时,有可能,或者说很有可能要将居中的容器(如header、footer)设置一定的margin-top和margin-bottom,这时候问题就来了,
一般来说,我们是我们很容易通过设置单独元素的margin-top和margin-bottom来覆盖wrap类中的设置。
例如,
.wrap { width: 960px; margin: 0 auto; }
#header { height: 100px; margin-top: 20px; background-color: #85c155; }
由于id选择器优于class选择区,所以即使将.wrap{}和#header{}顺序交换,上面的代码也是没问题的,margin-top总会显示出来。
由于时下,很多前端同学滥用class,倘若,他没有用id而是用class标记header,如下面:
<body>
<div class="wrap header">
</div>
</body>
而与此同时,又将wrap和header的顺序没搞好,像下面:
.header { height: 100px; margin-top: 20px; background-color: #85c155; }
.wrap { width: 960px; margin: 0 auto; }
哈,这时候margin-top就失效了,被下面的margin: 0 auto覆盖了。
所以,为了避免这种情况,尤其是多人协作工作时,建议将wrap类的CSS写成下面这样
.wrap { width: 960px; margin-left: auto; margin-right: auto; }
这样,对于某个特定的元素,无论是id或是另一个class标记的,无论顺序如何,都可以随心所欲的设置margin-top和margin-bottom
当然,只要主意一点,直接用 margin: 0 auto 也还是可以的。
国内的网站大多数都用的是 margin: 0 auto,淘宝网用的是 margin-left: auto; margin-right: auto;(淘宝的前端在业界是一个令人敬佩的团队!)
问题二:
对于IE浏览器,你可得多个心眼。
虽说IE6都是被人十分鄙视的玩意儿了,但是大多数网吧都还是用它,所以。。。还是照顾一下这位IE同志吧(我一般是不想照顾它的)。
在怪异模式中的IE5.X和IE6是不支持自动白边的(margin: auto)!!!草泥马哟!
但是还是有救的,IE6把 text-align: center 理解为让所有元素都居中,而不仅仅是文本居中。
那么我们就很简单找到解决办法:
将上层标签的text-align设置为center,让后为了让容器中的文字正常,在容器中把text-align重新设置为center,如下所示:
<body>
<div id="header" class="wrap">
</div>
</body>
...
body { text-align: center; }
.wrap { width: 960px; margin-left: auto; margin-right: auto; }
#header { height: 100px; background-color: #85c155; text-align: left; }
但是,由于用IE6的人估计也没多少心思琢磨界面,而且将body的text-align设置为center太冒失,后面的元素都要重新覆盖回来,所以在上线的产品中,很少有用这种方法的,大家都不想管怪异模式下的IE56,至少我是不想不管。所以这里只是告诉大家存在这么个问题,还是不要在生产环境中使用这种专门为怪异模式IE56设计的方法为好。
---------------
OK,第一个方法将完了!
感觉自己太啰嗦了,一个这方法居然写了这么一大篇!
--
FROM 58.19.126.*