在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
如需转载，烦请注明：http://www.w3cplus.com/css/5-simple-but-useful-css-properties.html