實(shí)用的CSS屬性有哪些

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)實(shí)用的CSS屬性有哪些，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)是一家專業(yè)提供城北企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站建設(shè)、H5場景定制、小程序制作等業(yè)務(wù)。10年已為城北眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

 1. Outline

在調(diào)試CSS問題的時候，我常常在指定元素上添加border來精確的查看該元素會發(fā)生什么并幫助確定問題的來源。這常常是有效的，因?yàn)樗梢栽诓?局上給我更加具體的可視性。但是如果是塊級元素，這可能會發(fā)生某些錯誤——在任何塊級元素上添加1px的邊框很可能會影響到布局，它會讓這個元素的寬度額 外增加2px。

outline 屬性是完美的替代者，因?yàn)樗梢栽诓挥绊懳臋n流的情況下呈現(xiàn)該對象。但是IE6 和IE7 不支持 outline 屬性，所以，它不能在這兩個瀏覽器中用于調(diào)試。
2. Inherit (值)

在CSS開發(fā)中有很多這樣的例子：通過在特定元素上設(shè)置某些樣式來告訴該元素來“繼承”它父級元素的所有已添加的屬性，這樣你就可以避免相當(dāng)多的鍵盤輸入。

這可以通過設(shè)置 inherit 來很容易的實(shí)現(xiàn)。這可能很有用。比如，當(dāng)重寫 background 屬性的時候，常常會有很多的文字在該屬性中(色彩、圖片的URL地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級元素有相同 的背景屬性，一個 inherit 值就可以搞定一切——這顯然大大的節(jié)省了鍵盤輸入。

不幸的是， inherit 值在IE6和IE7不被支持（除了用于 direction (文字方向) 和 visibility 屬性）。

某人說，代碼就像女人的裙子——越短越好，看來IE會阻礙我們這個愿望的實(shí)現(xiàn)。
3. Empty-Cells

該屬性只用于table或者”display”屬性被設(shè)置為”table-cell”的元素。如果你動態(tài)的為一個table添加內(nèi)容，就可能會遇到某個單元格的內(nèi)容為空的情況，然后你又不希望這個空的單元格的邊框、背景色、背景圖片等隱藏掉。

使用”empty-cells: hide”就能解決這個問題，它會將可能出現(xiàn)這種情況的單元格完全隱藏掉。

Internet Explorer 不支持empty-cells屬性。
4. Caption-Side

說到table 的屬性，這個屬性用于聲明顯示在表格的側(cè)欄的表格標(biāo)題。它接受 top 、 bottom 、 left 和 right 四個值。Internet Exporer 不支持這個屬性，table的標(biāo)題在IE6和IE7中將總是出現(xiàn)在表格的頂部。
5. Counter-Increment / Counter-Reset

有序列表(<ol>)非常方便，因?yàn)樗梢允∪ツ闶止ぬ砑舆f增數(shù)字的麻煩，而且它允許你不用更改數(shù)字就能改變列表的序列。

CSS 擁有 counter-increment 和 counter-reset 屬性，它允許你用來自動生成遞增數(shù)字到幾乎所有的html元素上，就像有序列表的效果一樣。

這里有個示例：
 

CSS Code復(fù)制內(nèi)容到剪貼板

  1. h3 {countercounter-increment: headers;}   

  2. h2:before {content: counter(headers) ". ";}  

上面的樣式將在所有的 <h3> 標(biāo)簽前面自動添加遞增的數(shù)字，而且允許你在h3標(biāo)簽上實(shí)現(xiàn)和li標(biāo)簽同樣的的效果。

但是IE6, IE7 甚至Safari(直到3.x版本)還不支持這些屬性。當(dāng)然，IE6也不支持:before 偽元素。
6. Min-Height

有時，一個網(wǎng)站的設(shè)計或布局結(jié)構(gòu)需要一個有固定高度的內(nèi)容區(qū)域，否則特定的視覺效果就會丟掉。這可能會因?yàn)橐粋€漸變背景、一個獨(dú)特的下拉列表、 或者可能是因?yàn)镻S出來的很酷的發(fā)光效果。但是有的時候，頁面中的內(nèi)容會比較多，而頁面卻不能像預(yù)期那樣展開。

這個時候就需要用到 min-height 屬性了，因?yàn)樗梢愿嬖V瀏覽器在一個特定的塊級元素上渲染最小的高度，不管內(nèi)容的實(shí)際高度是否達(dá)到了這個最小高度。然后呢，如果內(nèi)容超出了最小高度，該元素就會適度的擴(kuò)展開。

使用min-height 唯一需要注意到的是它在IE6中不被支持。我們都知道IE6在（緩慢的）退出歷史舞臺，但是有的客戶可能仍然要求他們的網(wǎng)站支持這個該死的瀏覽器。

不過令人高興的是，IE6 渲染 height 的值的方法正好和其它瀏覽器渲染“min-height”的方式一樣，所以你只需要一個針對IE6的hack或獨(dú)立的樣式表來為該元素添加特定的 height ，這個問題就解決了。

IE6 同樣無視 min-width 、 max-height 和 max-width ， 但是上述方法在這些屬性上也是可行的。
7. :hover

從技術(shù)上來說，:hover只是一個偽類，但是它在IE6中不被支持（IE7和IE8支持）。:hover偽類允許你在元素上添加任何的鼠標(biāo)經(jīng)過樣式。這非常有用，可以避免(至少在某種程度上)使用javascript。

但是如果你的網(wǎng)站，需要完全支持IE6，特別是在中國這種IE6一手遮天的情況下，那么你就必須考慮取消使用這個偽類，除非相關(guān)的標(biāo)簽有個”href”屬性，比如<a>標(biāo)簽。而且如果要實(shí)現(xiàn)這種效果，可能必須借助于javascript和額外的樣式。
8. Display

Display 通常被設(shè)置為這三個值中的一個： block、inline和 none?！暗靡嬗凇盜E，Display的其它值很少被用到。這些值包括 inline-block、table、inline-table和table-cell等，這些屬性對于解決一些特殊的布局問題時，是很有用的。

所以，盡管IE 確實(shí)支持Display的這三個基本屬性，但是它基本上不支持其它屬性。

其實(shí)，IE8對display的屬性支持已經(jīng)相當(dāng)完整了。不過，對于inline-block屬性，IE6/7只支持本身為inline的元素。
9. Clip

這是一個在特殊情況下能派上用場的很有趣的CSS屬性。它可能和不可預(yù)知的、動態(tài)生成的內(nèi)容結(jié)合起來。簡單來說，這個屬性允許你在一個特定的元素上 指定隱藏區(qū)域&mdash;&mdash;也可以理解為，在一個絕對定位的元素中，按照一定的設(shè)置來裁剪該元素的顯示區(qū)域，超出該區(qū)域的內(nèi)容會被隱藏掉。語法看起來像這樣的：
 

CSS

  1. div.clipped {   

  2.          padding: 20px;   

  3.          width: 400px;   

  4.          height: 400px;   

  5.          clip: rect(20px, 300px, 200px, 100px);   

  6.          position: absolute;   

  7. }  

修剪只能用于一個絕對定位的元素，而且只用使用矩形區(qū)域。括號內(nèi)的數(shù)字劃出的區(qū)域(200px*180px大小)為可見區(qū)域，該區(qū)域以外的內(nèi)容不可見或者被剪切掉。

技術(shù)上來講， clip 屬性被IE支持，但是只支持無逗號的語法，比如
 

CSS

  1. div.clipped {   

  2.     padding: 20px;   

  3.     width: 400px;   

  4.     height: 400px;   

  5.     clip: rect(20px 300px 200px 100px);   

  6.     position: absolute;   

  7. }  

上面的樣式（rect后面括號里的屬性沒有用逗號隔開）在大多數(shù)瀏覽器下都可運(yùn)行，但是可能不會通過CSS驗(yàn)證，因?yàn)檎Z句沒有用逗號隔開。
10. :focus

這是另外一個偽類需要在這里被提及的，因?yàn)樗械姆荌E瀏覽器，都支持這個屬性。:focus偽類允許你聲明一個特別的樣式，當(dāng)一個頁面元素成為鍵 盤(鼠標(biāo))焦點(diǎn)的時候，將該樣式動態(tài)的應(yīng)用到該元素上。這在表單元素上非常有用，因?yàn)槟憧梢栽谝粋€輸入框被選中的時候給它添加一個邊框。

下面的樣式將在輸入框成為鍵盤焦點(diǎn)的時候添加一個紅色的邊框：
 

CSS 

  1. input:focus {   

  2.         border: 1px solid #f00;   

  3. }  

上述就是小編為大家分享的實(shí)用的CSS屬性有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：實(shí)用的CSS屬性有哪些
文章路徑：http://bm7419.com/article6/ipocig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、軟件開發(fā)、電子商務(wù)、App開發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站