你未必知道的10个CSS技巧(转）

作者：Dark

evolt.org作者之一Trenton写的Ten CSS tricks you may not know，还是非常有用处的，无论CSS新手还是老枪，有些技巧的确鲜为人知。你可以去看英文原版，词汇并不复杂。其实这篇文章有翻译的价值的，不过我最近比较懒，就简单用中文简述一下，其间会插入一些自己的经历和看法：

font的简写

CSS很多元素都有简写，

font

要特别和严格一些，

font-size

和

font-family

是必须的，而且要按照这个顺序。因为

font

用到的地方比较多，所以他可能特别提到。简写能有效减小你的CSS文件的体积。

class属性叠加

其实在

class

中可以同时加入多个属性，属性用空格隔开。例如：

<p class="text side">...</p>

这样

<p>

就继承了

.text

和

.side

的有效属性（冲突的地方会自动被排斥）。随便提一下kubrick主题中也有一个地方使用了这个方法。该文章回复的用户提到IE在处理多属性时可能存在问题。

border的缺省值

当你使用border简写时没有指定

border-width

和

border-color

时，border是有缺省值的，宽度为

medium

（大概3到4个象素），颜色为框内文本的颜色。

!important不理会IE

在CSS规则中，

!important

会使该规则额外优先，而IE却听不懂这条规则，那么在某些时候这个技巧会非常有用。

图片移魂大法

你先看看原文的叙述，我谈谈我的经历。哈哈，我最早在zeldman的Blog上发现了这个技巧，注意他的导航条，鼠标悬停时空心字图片会变为实心，而实际上这是一张图片。呵呵，你再去分析一下他的CSS就知道了。

盒模式的另类hack法

IE6以前的版本都有对盒模式的错误理解。以前都是看用CSS的声音属性来处理IE6以下版本的效果，这次你可以看看另外一种方法，看上去更简单方便。

块元素居中

我们一般都使用指定块宽度再把左右

margin

设置为

auto

来居中。殊不知有时会在IE6之前的版本出现问题。去看看解决技巧，有CSS示例。

垂直居中

CSS对垂直居中比较弱，没有表格那么灵活。而且

vertical-align

这个属性你就是用了也是不起作用的。方法就在于用行高来解决，把行高设置为整个box的高度。

子容器的定位

CSS的奇妙除了可以让对象随处定位外，还可以让子容器也做得到。这个用处也很多。比如Binary Bonsai的导航条。

控制屏幕底部的背景色

这个请看原文的详细讲解了。