五个比较实用的CSS属性，网页设计时很多时候都使用到。

这篇文章是关于5个有用的CSS属性的，也许你很熟悉但是却不常用。我不是将新兴的CSS3的属性，而是指CSS2的属性，例如：clip, min-height, white-space, cursor和display，他们被各种浏览器支持。所以，千万不要错误这篇文章哦，因为你将发现一些非常有用的东西。

1. CSS Clip
clip属性像是一个遮罩。它允许你在一个矩形内遮罩一个元素内容。要修剪一个元素，你必须指明position为absolute，然后指明top, right, bottom和left相对于元素的值。

图像修剪实例(demo)

下面的实例演示了如果使用clip属性遮罩一个图像。首先，指明<div>元素的position:relative。下一步，指明<img>原色的position:absolute和相对的矩形值。

1. .clip {
2. position: relative;
3. height: 130px;
4. width: 200px;
5. border: solid 1px #ccc;
6. }
7. .clip img {
8. position: absolute;
9. clip: rect(30px 165px 100px 30px);
10. }

复制代码

图像调整大小与修剪(demo)
在这个例子中，我将给你演示如何调整图像的大小并修剪图像。我原来的图片是一个矩形格式。我希望将它缩小50%来创建一个正方形格式的缩略图。因为，我使用width和height属性来调整图像的大小，然后使用clip属性来做遮罩。然后，我使用left属性来将图片左移15px。

1. .gallery li {
2. float: left;
3. margin: 0 10px 0 0;
4. position: relative;
5. width: 70px;
6. height: 70px;
7. border: solid 1px #000;
8. }
9. .gallery img {
10. width: 100px;
11. height: 70px;
12. position: absolute;
13. clip: rect(0 85px 70px 15px);
14. left: -15px;
15. }

复制代码

2. Min-height(demo)

min-height属性允许你指定元素的最小高度。在你需要平衡布局时非常有用。我在我的工作经历中使用了它，以确保内容区域始终比工具条要高。

1. .with_minheight {
2. min-height: 550px;
3. }

复制代码

IE6的Min-height hack
注意：IE6不支持min-height，但是有一个min-height hack。

1. .with_minheight {
2. min-height:550px;
3. height:auto !important;
4. height:550px;
5. }

复制代码

3. White-space(demo)
white-spcae属性指明如何处理元素的空白间隔。例如，指明white-space: nowrap将阻止文本换行。

1. em {
2. white-space: nowrap;
3. }

复制代码

4. Cursor (demo)
如果你改变一个按钮的行为，同时你也会更改它的鼠标样式。例如，如果按钮不可用，那么鼠标将变成默认样式(箭头)，指示按钮不可被点击。因此，cursor属性在web应用开发中是非常有用的。

1. .disabled {
2. cursor: default;
3. }
5. .busy {
6. cursor: wait;
7. }
9. .clickable:hover {
10. cursor: pointer;
11. }

复制代码

5. Display inline / block (demo)
也许你不知道的：block的元素是在心的一行渲染的，然而inline的元素是在同一行渲染的。 <div>, <h1>和<p>标签是block元素的例子。inline标签的例子有：<em>, <span>和<strong>。你可以通过指明display:inline或block来重写display样式。

1. .block em {
2. display: block;
3. }
5. .inline h4, .inline p {
6. display: inline;
7. }

复制代码