不可繼承的: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。
不及繼承:也就是指子節點不能繼承父節點的屬性,譬如:
這是父節點效果如下:這是子節點
如果子節點能繼承父節點的border屬性,那麼也會有乙個紅色邊框。
所有元素可繼承: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。
相反,可繼承就是父節點設定了這個屬性後,子節點就可以繼承他的屬性,
這裡要明白什麼是塊狀元素,內聯元素。
塊狀元素,是其屬性display的預設值為block的標籤,也就是div,p,h1等等,但不代表這些標籤一定是塊狀元素,當程式設計師把他的display屬性改變,就不是塊狀元素,例如:
這是塊狀元素效果如下:這也是塊狀元素
但如果,把其中乙個div的display設定成inline,就變成:
ps:內聯元素,width,和height屬性都不起效的。
再看看例子:
我是內聯元素效果如下:我也是內聯元素
我們把其中乙個display設定成block時就會有:
很明顯的是,乙個標籤沒有說是一定是塊狀元素,當他的display屬性被設定了,就會改變他。
有一點要注意的是當原本是內聯元素的被設定float,也會變成呢個塊元素的,把上面的「我是內聯元素,設定為float:left,效果如:
你是否看出有點不同,和兩個都是塊元素,有區別。這裡不討論。
明白了什麼是塊狀元素,就會對什麼便簽能繼承什麼屬性,什麼便簽不能,就會有乙個認識,這裡最後乙個例子,是一些容易被人忽略的屬性繼承:
這是一級塊狀元素這是二級塊狀元素,這是突出效果的,沒別的意思,巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
這是**塊狀元素
這是內聯元素
text-indent:文字縮排,這是乙個比較少用的屬性,它是一段文字的第一行縮排多少個畫素,或字元。很明顯它是乙個文字編輯的屬性,但有些人會把它當成間距屬性使用,這樣子做其實是很怪誕的:
第一,你不可保證,那段文字,永遠都只有一行。
第二,定義為text-indent的子節點是塊狀元素,會繼承這個屬性的,但而其他人接受你寫的css後,多數的時候都不會預計到子節點繼承text-indent屬性,而去修改。
為了避免這種不可預計的繼承,你可以用padding,來代替text-indent,而不是,你發現這個屬性,覺得很新奇,一時童心未泯地用。
原文**自
CSS中可以繼承和不可以繼承的屬性
一 無繼承性的屬性 1 display 規定元素應該生成的框的型別 2 文字屬性 vertical align 垂直文字對齊 text decoration 規定新增到文字的裝飾 text shadow 文字陰影效果 white space 空白符的處理 unicode bidi 設定文字的方向 3...
CSS中可以和不可以繼承的屬性
一 無繼承性的屬性 1 display 規定元素應該生成的框的型別 2 文字屬性 vertical align 垂直文字對齊 text decoration 規定新增到文字的裝飾 text shadow 文字陰影效果 white space 空白符的處理 unicode bidi 設定文字的方向 3...
CSS中可以和不可以繼承的屬性
一 無繼承性的屬性 1 display 規定元素應該生成的框的型別 2 文字屬性 vertical align 垂直文字對齊 text decoration 規定新增到文字的裝飾 text shadow 文字陰影效果 white space 空白符的處理 unicode bidi 設定文字的方向 3...