五個比較實用的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. }

複製代碼