css中繼承
阿新 • • 發佈:2019-02-05
繼承: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(補白)和背景等。這樣設定是有道理的,例如,為一個<div>設定了邊框,如果此屬性也繼承的話,那麼在這個<div>內所有的元素都會有邊框,這無疑會產生一個讓人眼花繚亂的結果。同樣的,影響元素位置的屬性,例如margin(邊距)和padding(補白),也不會被繼承。
同時,瀏覽器的預設樣式也在影響著繼承的結果。例如:
body { font-size: 12px; }
<h2>2級標題的文字不是12px。// </h2> H2中文字將是標題2樣式的文字而非12px大小的文字。
這是因為瀏覽器的預設樣式設定了<h2>的CSS規則。
同時,有些老版本的瀏覽器可能對繼承支援的不太好,例如某些瀏覽器當遇到<table>的時候,就會丟失所有的繼承的屬性,5.能否取消