首頁 > web前端 > css教學 > css中屬性值繼承介紹

css中屬性值繼承介紹

巴扎黑
發布: 2017-08-18 13:40:12
原創
1776 人瀏覽過

這篇文章主要介紹了css中屬性值繼承,介紹了屬性的可以繼承和不可繼承,同時分析了繼承的局限性以及是否可以取消等等,具體操作步驟大家可查看下文的詳細講解,有興趣的小夥伴可以參考一下。

繼承:html元素可以從父元素繼承一部分css屬性,即使目前元素沒有定義該屬性。

1.css可以和不可以繼承的屬性

不可繼承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread- before和unicode-bidi。
所有元素可繼承:visibility和cursor。
內嵌元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text -decoration、text-transform、direction。
終端塊狀元素可繼承:text-indent和text-align。
列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可繼承:border-collapse。
 

2.值的繼承

  繼承也是基於文檔樹的,文檔樹中元素的某些屬性可以被其子元素繼承,每一個CSS屬性都定義了它能否被繼承。要設定文件的某些預設樣式屬性,可以在文件樹的根上設定該屬性,如果這個屬性可以繼承,則其後代元素將繼承這個屬性,例如color、font-size等屬性。

3.“inherit(繼承)”值

  每一個屬性可以指定值為“inherit”,即:對於給定的元素,該屬性和它父元素相對屬性的計算值會取一樣的值。繼承值通常只用作後備值,它可以透過明確地指定「inherit」而得到加強,例如:

         p { font-size: inherit; }

4.繼承的限制

繼承雖然減少了重複定義的麻煩,但是,有些屬性是不能繼承的,例如border(邊框)、margin(邊距)、 padding(補白)和背景等。
這樣設定是有道理的,例如,為一個

設定了邊框,如果此屬性也繼承的話,那麼在這個

內所有的元素都會有邊框,這無疑會產生一個讓人眼花撩亂的結果。同樣的,影響元素位置的屬性,例如margin(邊距)和padding(補白),也不會被繼承。

  同時,瀏覽器的預設樣式也在影響著繼承的結果。例如:

      body { font-size: 12px; }

      

2級標題的文字不是12px。

      //

H2中文字將是標題2樣式的文字而非12px大小的文字。

  這是因為瀏覽器的預設樣式設定了

的CSS規則。

同時,有些舊版的瀏覽器可能對繼承支援的不太好,例如某些瀏覽器當遇到

的時候,就會遺失所有的繼承的屬性

5.能否取消

css屬性一旦繼承了不能被取消,只能重新定義樣式。

6.案例

父元素position:relative 子元素:position:absolute 父元素寬度固定,子元素會繼承父元素的寬度(對於二級導航很重要,當隱藏的那個導航列寬度不固定,或寬度大於父元素時,此時一般只能重新設定子元素的寬度)

走岔了,就退回來;走得急,就緩一些。不時停下來想想,望一望,琢磨琢磨,再繼續走。

以上是css中屬性值繼承介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板