五个比较实用的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
和相对的矩形值。



.clip {

position: relative;

height: 130px;

width: 200px;

border: solid 1px #ccc;

}

.clip img {

position: absolute;

clip: rect(30px 165px 100px 30px);

}

复制代码

图像调整大小与修剪(demo
)


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



.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;

}

复制代码

2. Min-height(demo
)

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



.with_minheight {

min-height: 550px;

}

复制代码

IE6的Min-height hack


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

.with_minheight {

min-height:550px;

height:auto !important;

height:550px;

}

复制代码

3. White-space(demo
)

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



em {

white-space: nowrap;

}

复制代码

4. Cursor (demo
)

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



.disabled {

cursor: default;

}

.busy {

cursor: wait;

}

.clickable:hover {

cursor: pointer;

}

复制代码

5. Display inline / block (demo
)

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



.block em {

display: block;

}

.inline h4, .inline p {

display: inline;

}

复制代码