全面總結css中屬性值繼承知識
- 小云云原創
- 2017-12-12 09:31:591670瀏覽
本文主要介紹了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規則。
同時，有些舊版的瀏覽器可能對繼承支援的不太好，例如某些瀏覽器當遇到