【翻譯】5個簡單，但有用的CSS屬性

　　這篇文章是5個你應該很熟悉的有用的CSS屬性，但很可能會很少使用。我不是在談論新的設想的CSS3屬性。我指的是舊的CSS2中的屬性，如：clip, min-height, white-space, cursor, 和 display，這些被所有的瀏覽器廣泛支援。所以，不要錯過這篇文章因為你可能會驚訝他們是多麼有用。

1.CSS Clip

　　Clip屬性就像一個面罩。它允許你在掩蓋矩形元素的內容。要剪輯一個元素：你必須指定position為absolute。然後，指定相對於元素的top，right，bottom，和left的值。

映像剪輯執行個體(示範)

　　下面的樣本將示範如何使用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);
}

 

映像調整和剪輯（示範）

　　在這個例子中，我將告訴你如何調整和剪輯映像。我的原映像為矩形格式。我想按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;</span>
}

2.Min-height（示範）

　　min-height屬性允許你指定元素的最小高度。但你需要平衡布局的時候它就很有用了。我在我的job board上使用它來確保內容地區總是高過側邊欄。

 

.with_minheight {
  min-height: 550px;
}

 

IE6的min-height hack

　　註：min-height不支援IE6的，但這裡有一個min-height hack。

 

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

3.White-space（示範）

　　White-space屬性指定一個元素如何處理空白。例如，指定white-space:nowrap將會防止文本從一行包裹到下一行。

 

em {
  white-space: nowrap;
}

 

4. Cursor (示範)

　　如果您更改按鈕的行為，你也應該改變游標。 例如，當一個按鈕被禁用，游標應改為預設（箭頭），以表明它是無法點擊。 因此， cursor屬性對開發web應用程式非常有用。

 

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

 

5. Display inline / block （示範）

　　也許您不知道塊元素呈現在一個新行，而內嵌元素是呈現在同一行。<div> ， <h1>和<p>標籤是塊元素的例子。內聯標籤的例子有：<em>，<span>，和<strong>。使用者也可以通過指定顯示的顯示樣式：inline或block。

 

.block em {
  display: block;
}

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

 

PS：

中文地址：

http://www.cnblogs.com/wiky/articles/5-simple-but-useful-css-properties.html 

英文地址：

http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/

　　中文由維奇翻譯，如有轉載請註明出處，翻譯如有錯漏歡迎留言指出，謝謝！