簡單實用的五個CSS屬性
本文向大家介紹一下5個實用的CSS屬性的使用,主要是clip,min-height,white-space,curosr和display等一些被所有瀏覽器廣泛支持的屬性,你應該很熟悉,但很可能很少會使用到,這里和大家分享一下其用法。
5個實用的CSS屬性
這篇文章介紹了5個實用的CSS屬性。你應該很熟悉,但很可能很少會使用到。我并不是在談論展望全新的CSS3屬性,我指的是舊的CSS2中的屬性,如:clip,min-height,white-space,curosr和display等一些被所有瀏覽器廣泛支持的屬性。因此,千萬不要錯過這篇文章,因為你可能發現它們竟有如此之大的用途。
1、CSSClip
剪輯(clip)屬性就像一個面具。它允許你使用矩形掩蓋頁面元素的內容。要剪輯一個元素:你必須指定其position屬性為absolute,然后指定相對于元素的top,right,bottom,left值。
圖片剪輯實例(演示)
以下示例演示了如何使用clip屬性掩蓋一張圖片。首先,指定
- .clip{
- position:relative;
- height:130px;
- width:200px;
- border:solid1px#ccc;
- }
- .clipimg{
- position:absolute;
- clip:rect(30px165px100px30px);
- }
#p#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;
- }
#p#4、Cursor(演示)
如果你改變了按鈕的行為,其指針也應該隨之改變。比如,當一個按鈕不可用時,指針應該改變為默認的箭頭,來表明它不可點擊。因此,cursor屬性在開發Web應用程序時相當有用。
- .disabled{
- cursor:default;
- }
- .busy{
- cursor:wait;
- }
- .clickable:hover{
- cursor:pointer;
- }
5、Displayinline/block(演示)
如果你不知道:塊級元素是作為獨立的一行來渲染的,而行內元素是在同一行被渲染的。
和
標簽都是塊級元素,,,都是行內元素。通過display:inline或block的方式,你可以重設這些元素的display樣式。
- .blockem{
- display:block;
- }
- .inlineh4,.inlinep{
- display:inline;
- }
【編輯推薦】


2022-11-01 15:57:44
2022-12-06 17:18:42





51CTO技術棧公眾號
