簡單實(shí)用的五個(gè)CSS屬性
本文向大家介紹一下5個(gè)實(shí)用的CSS屬性的使用，主要是clip，min-height，white-space，curosr和display等一些被所有瀏覽器廣泛支持的屬性，你應(yīng)該很熟悉，但很可能很少會(huì)使用到，這里和大家分享一下其用法。
5個(gè)實(shí)用的CSS屬性
這篇文章介紹了5個(gè)實(shí)用的CSS屬性。你應(yīng)該很熟悉，但很可能很少會(huì)使用到。我并不是在談?wù)撜雇碌腃SS3屬性，我指的是舊的CSS2中的屬性，如：clip，min-height，white-space，curosr和display等一些被所有瀏覽器廣泛支持的屬性。因此，千萬不要錯(cuò)過這篇文章，因?yàn)槟憧赡馨l(fā)現(xiàn)它們竟有如此之大的用途。
1、CSSClip
剪輯(clip)屬性就像一個(gè)面具。它允許你使用矩形掩蓋頁面元素的內(nèi)容。要剪輯一個(gè)元素：你必須指定其position屬性為absolute，然后指定相對于元素的top，right，bottom，left值。
圖片剪輯實(shí)例（演示）
以下示例演示了如何使用clip屬性掩蓋一張圖片。首先，指定
- .clip{
- position:relative;
- height:130px;
- width:200px;
- border:solid1px#ccc;
- }
- .clipimg{
- position:absolute;
- clip:rect(30px165px100px30px);
- }
#p#2、Min-height（演示）
min-height屬性允許你指定元素的最小高度，適用于需要平衡布局的情況。我將它用于Job面板上，以確保內(nèi)容區(qū)域高于側(cè)邊欄。
- .with_minheight{
- min-height:550px;
- }
IE6的Min-heighthack
注：神奇的IE6原生不支持min-height屬性，不過幸好有一個(gè)min-heighthack。
- .with_minheight{
- min-height:550px;
- height:auto!important;
- height:550px;
- }
3、White-space（演示）
white-space屬性指定了元素中空白的處理方式。比如，指定white-space:nowrap會(huì)阻止文本自動(dòng)換行。
- em{
- white-space:nowrap;
- }
#p#4、Cursor（演示）
如果你改變了按鈕的行為，其指針也應(yīng)該隨之改變。比如，當(dāng)一個(gè)按鈕不可用時(shí)，指針應(yīng)該改變?yōu)槟J(rèn)的箭頭，來表明它不可點(diǎn)擊。因此，cursor屬性在開發(fā)Web應(yīng)用程序時(shí)相當(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;
- }
- .inlineh4,.inlinep{
- display:inline;
- }
【編輯推薦】
- CSS Sprites工作原理及優(yōu)缺點(diǎn)
- CSS層疊與繼承用法手冊
- DIV布局規(guī)范中CSS類及id命名方式
- CSS網(wǎng)頁布局中id與class命名規(guī)則
- 將XHTML+CSS頁面轉(zhuǎn)換為打印機(jī)頁面技巧
分享到微信 
分享到微博
51CTO技術(shù)棧公眾號
速覽