编者注:本集锦摘编自图灵新书《CSS设计师指南(第3版)》第3章“定位元素”,是作者从相关主题中提炼出来的短小精悍的提示和法则。其中,既包含业界公认的CSS最佳实践,又不乏作者独到的一家之言,还有很多有价值的参考资料。理解这些CSS知识点,对夯实基础,开阔视野是至关重要的。

要了解有关盒模型的更多信息,请参考这里:http://www.w3.org/TR/REC-CSS2/box.html

CSS推荐标准并未明确规定border-width这几个文本值thinmediumthick的确切宽度,实际显示的宽度可能会因浏览器而异。对于边框样式(border-style),除了solid值(实线)之外,CSS规范也没有明确规定。因此dashed值(虚线)在不同浏览器中的短划线长度和线间距也可能会不一样。

中和外边距和内边距

推荐大家把下面这条规则作为样式表的第一条规则:

* {margin:0; padding:0;}

这条规则把所有元素默认的外边距和内边距都设定为零。把这条规则放到样式表里后,所有默认的外边距和内边距都会消失。然后,你可以为那些真正需要外边距的元素再添加外边距。稍后我们会介绍,不同浏览器默认的内边距和外边距也不一样,特别是对表单和列表等复合元素。在这种情况下,用前面那条规则“中和”默认值,然后再根据需要添加,则会得到跨浏览器一致的效果。

我在自己的项目中使用了Eric Meyer写的重置样式表reset.css。这个样式表不仅重置了外边距和内边距,还对很多元素在跨浏览器显示时的外观进行了标准化。 至于Eric为什么要写一个涉及面如此之广的重置样式表,可以参考他的文章http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning,reset.css的下载地址是http://meyerweb.com/eric/tools/css/reset

注意啦,叠加的只是垂直外边距,水平外边距不叠加。对于水平相邻的元素,它们的水平间距是相邻外边距之和。这跟你最初想的一样。

随着HTML5时代的到来,以及旧版浏览器退出历史舞台,用于确保站点在严格模式(使用W3C标准的盒模型)或混杂模式(适应IE6及更早版本的盒模型)下呈现的XHTML文档声明也就不再需要了。要了解什么是混杂模式,请参考这篇文章:http://www.quirksmode.org/css/quirksmode.html

CSS3新增了一个box-sizing属性,通过它可以将有宽度的盒子也设定成具有默认的auto状态下的行为。但只有最新版本的浏览器才支持该属性,所以在本书写作时(2012年夏天),我还不能推荐你使用它。

影响浮动的因素还有很多,推荐读者看一看Eric Meyer的那本Cascading Style Sheets 2.0 Programmer's Reference(2006,McGraw-Hill Osborne Media)。这里摘录Eric在那本书里写的一句话:“当你浮动一个元素的时候……这些(浮动)规则就好像在说:‘尽量把这个元素往上放,能放多高放多高,直到碰到某个元素的边界为止。’”即使这本书的出版年份是2006年,但它仍然是任何CSS高手必备的一本参考书。这本书涵盖了CSS运行机制的方方面面,其中很多在别的书里是找不到的。

CSS3 Multi-column Layout Module规定了如何用CSS定义多栏布局。但在本书写作时,只有Opera和IE10支持相应属性。因此在可以预见的未来,float属性仍然是创建多栏布局的最佳途径。

浮动非图片元素时,必须给它设定宽度,否则后果难以预料。图片无所谓,因为它本身有默认的宽度。

实际上,overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden之后,包含元素依然保持其设定的宽度,而超大的子内容则会被容器剪切掉。除此之外,overflow:hidden还有另一个作用,即它能可靠地迫使父元素包含其浮动的子元素。

这个clearfix规则最早是由程序员Tony Aslett发明的,它只添加了一个清除的包含句点作为非浮动元素(必须得有内容,而句点是最小的内容)1。规则中的其他声明是为了确保这个伪元素没有高度,而且在页面上不可见。

1 :after会在元素内容——而不是元素后面插入一个伪元素。——译者注

使用clear:both意味着section中新增的子元素会清除左、右浮动元素(位于左、右浮动元素下方)。这里当然可以只用left,但both也适用于将来图片float:right的情况。

可以给topleft属性设定负值,把元素向上、向左移动。

请注意,对HTML中的文本应该使用恰当的语义标签来标记。我们这里为了说明问题的需要,才把文本直接放在了没有语义的div中。

事实上,只要把元素的外边距和内边距设定好,多数情况下只用静态定位就足以实现页面布局了。很多刚开始接触CSS的初学者都会错误地设定position属性,最终才发现从文档流中挪出来的这些元素一点也不好控制。因此,除非真需要那么做,否则不要轻易修改元素默认的position属性。

只给background-position设定一个关键字值,则另一个也会取相同的值(比如这里就相当于写了background-position:center cetner)。

我听见有人小声嘀咕:“为什么文本也跟着垂直居中了呢?”哈哈,这是因为我把line-height设定成了元素的高度,而行高是在文本行上下平均分配的。此外,我还把text-align设定为center,把文本水平居中。这样就让文本跟背景图片一样,在两个方向上都居中了。

Modernizr是一个JavaScript库,用于检测用户浏览器支持哪些HTML5和CSS3功能。更多信息,请参考这个网址:http://modernizr.com

有关CSS3中新背景属性的更多信息,请参考:http://www.w3.org/TR/css3-background

渐变是CSS帮我们生成的背景图片。添加渐变可以使用background-image属性,也可以像后面例子中一样使用快捷background属性。