CSS常用的幾個屬性介紹

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

5個實(shí)用的CSS屬性

這篇文章介紹了5個實(shí)用的CSS屬性。你應(yīng)該很熟悉，但很可能很少會使用到。我并不是在談?wù)撜雇碌腃SS3屬性，我指的是舊的CSS2中的屬性，如：clip，min-height，white-space，curosr和display等一些被所有瀏覽器廣泛支持的屬性。因此，千萬不要錯過這篇文章，因?yàn)槟憧赡馨l(fā)現(xiàn)它們竟有如此之大的用途。

1、CSSClip

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

圖片剪輯實(shí)例（演示）

以下示例演示了如何使用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面板上，以確保內(nèi)容區(qū)域高于側(cè)邊欄。

.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（演示）

如果你改變了按鈕的行為，其指針也應(yīng)該隨之改變。比如，當(dāng)一個按鈕不可用時，指針應(yīng)該改變?yōu)槟J(rèn)的箭頭，來表明它不可點(diǎn)擊。因此，cursor屬性在開發(fā)Web應(yīng)用程序時相當(dāng)有用。

.disabled{  cursor:default;  }   .busy{  cursor:wait;  }   .clickable:hover{  cursor:pointer;  }

5、Displayinline/block（演示）

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

，

和

標(biāo)簽都是塊級元素，，，都是行內(nèi)元素。通過display:inline或block的方式，你可以重設(shè)這些元素的display樣式。

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

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