5个简单，但非常有用的属性

在Webdesignerwall.com逛时，看到一篇文章《5 Simple, But Useful CSS Properties 》一文，细看以之后真的很有用，这几个属性大家都有见过，也很常用，但有几个人会认为他很有用呢？不信，我们来一起看看。

《5 Simple, But Useful CSS Properties 》原文是这么描述的

“这篇文章是关于5个用的CSS属性，你应该非常的熟悉，但很有机能你很少在使用。我不是在讨论CSS3的新属性，我所指的是CSS2中的老属性：clip,min-height,white-space,cursor和display。这些属性都得到浏览器的广泛支持。所以，不要错过这篇文章，因为你可能会惊讶的发现这5个属性是多么的有用。“

我看了之后也觉得很惊讶，很有意思，属性虽然简单，但有时候我们往往忽略这些简单属性的运用，于是今天我借花献佛，将这篇文章简单的译成中文，放在w3cplus上，希望对同学们有所帮助。

1、clip

clip属性就像一个朦板一样，它允许你的让元素的内容在这一个矩形的图形中。使用clip属性时你需要注意两点：第一将元素设置为“position:absolute”；第二指定元素的定位值“top,right,bottom,left”,如图所示：

接下来看两个实例：

图片剪切（DEMO）

这个实例是用clip来制作一个图片剪切的效果，首先你要在图片的父元素，例如“<div>”上定义属性“position:relative”，接下来在“<img>”上定义“position:absolute”，并使用rect的属性值，如：

具体代码如下所示：

.clip {  position: relative;  height: 130px;  width: 200px;  border: solid 1px #ccc;}.clip img {  position: absolute;  clip: rect(30px 165px 100px 30px);}

上面效果是直接剪切图片，但有时候我们还想让图片进行比例的剪切，那么只需要在上面的案例基础上做一下调整，具体看下面的案例

图片缩放与剪切（DEMO）

在这个DEMO中，缩放显示图片，首先默认图片是一张矩形图片，并在这个基础上实现50%的缩放。因此在这处图片设置了一个“width”和“height”值，并使用clip属性进行剪切，如：

对应代码如下：

.gallery li {  float: left;  margin: 0 10px 0 0;  position: relative;  width: 70px;  height: 70px;  border: solid 1px #000;}.gallery img {  width: 100px;  height: 70px;  position: absolute;  clip: rect(0 85px 70px 15px);  left: -15px;}

注意，在IE8以及其以下的版本，在使用clip属性时需要注意语法：

clip (top,right,bottom,left);

用逗号将其分开才会有效。

有关于图片的缩放效果，早期w3cplus在《纯CSS制作缩略图片》也做过详细介绍，其中一种方法就是使用今天介绍的clip制作的，有兴趣的同学可以看看。

2、最小高度min-height(DEMO)

“min-height”属性可以让你确定一个元素的最小高度（IE6下需要另外处理），这个属性在制作布局中是非常有用的，比如说当你主内容区内容不够撑高容器与侧栏相同或者比侧栏高时，这个最小高度就很有用处，如：

代码很简单：

.with_minheight {  min-height: 550px;}

由于IE6不支持min-height属性，所以在IE6下我们需要做一定的处理：

.with_minheight {  min-height:550px;  height:auto !important;  height:550px;}

详细的可以参考最小高度兼容代码，min-height。

3、white-space(DEMO)

"white-space"属性主要用来控制元素的文本，例如，指定"white-space:nowrap"让你的文本不换行，如下面的示例图：

代码示例：

em {  white-space: nowrap;}

有关于更详细的介绍，大家可以点我。

4、cursor(DEMO)

如果你对一个按钮改变了操作行为，最好也将鼠标形状也做一定的修改。例如，当你的按钮处理“禁用”时，你就应该将默认的鼠标变成不可点击（箭头）。如：

一起看一个简单的示例代码：

.disabled {  cursor: default;}.busy {  cursor: wait;}.clickable:hover {  cursor: pointer;}

5、display inline/block(DEMO)

“display”属性大家应该常用，我们可以使用这个属性，改变元素的显示风格，比如说通过“display”的“inline”将块元素变为行内元素，也可以通过“display”的“block”将行内元素变成块元素，如

示例代码如下所示：

.block em {  display: block;}.inline h4, .inline p {  display: inline;}

这五个属性是不是很简单，你有经常使用吗？或者说你会这么用吗？要是还没有，赶快动手吧。

英文地址：http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties