CSS常用的幾個屬性介紹

這篇文章主要講解了“CSS常用的幾個屬性介紹”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS常用的幾個屬性介紹”吧！

5個實用的CSS屬性

這篇文章介紹了5個實用的CSS屬性。你應該很熟悉，但很可能很少會使用到。我并不是在談論展望全新的CSS3屬性，我指的是舊的CSS2中的屬性，如：clip，min-height，white-space，curosr和display等一些被所有瀏覽器廣泛支持的屬性。因此，千萬不要錯過這篇文章，因為你可能發現它們竟有如此之大的用途。

1、CSSClip

剪輯(clip)屬性就像一個面具。它允許你使用矩形掩蓋頁面元素的內容。要剪輯一個元素：你必須指定其position屬性為absolute，然后指定相對于元素的top，right，bottom，left值。

圖片剪輯實例（演示）

以下示例演示了如何使用clip屬性掩蓋一張圖片。首先，指定

元素為position:relative，然后指定

.clip{  position:relative;  height:130px;  width:200px;  border:solid1px#ccc;  }  .clipimg{  position:absolute;  clip:rect(30px165px100px30px);  }

2、Min-height（演示）

min-height屬性允許你指定元素的最小高度，適用于需要平衡布局的情況。我將它用于Job面板上，以確保內容區域高于側邊欄。

.with_minheight{  min-height:550px;  }

IE6的Min-heighthack

注：神奇的IE6原生不支持min-height屬性，不過幸好有一個min-heighthack。

.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、Displayinline/block（演示）

如果你不知道：塊級元素是作為獨立的一行來渲染的，而行內元素是在同一行被渲染的。

，

和

標簽都是塊級元素，，，都是行內元素。通過display:inline或block的方式，你可以重設這些元素的display樣式。

.blockem{  display:block;  }   .inlineh5,.inlinep{  display:inline;  }

感謝各位的閱讀，以上就是“CSS常用的幾個屬性介紹”的內容了，經過本文的學習后，相信大家對CSS常用的幾個屬性介紹這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！