css可繼承屬性和不可繼承屬性

2021-07-11 22:18:37 字數 3364 閱讀 1864

不可繼承的: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。

不可繼承的: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。

不及繼承:也就是指子節點不能繼承父節點的屬性,譬如:

html

style="

border

:1px

solid

#ff0000;

">

這是父節點

這是子節點

效果如下:

如果子節點能繼承父節點的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屬性改變,就不是塊狀元素,例如:

html

style="

border

:1px

solid

#ff0000; width:400px; padding:10px;

">

這是塊狀元素

style="

border

:1px

solid

#ff0000; width:400px; padding:10px;

">

這也是塊狀元素

效果如下:

但如果,把其中乙個div的display設定成inline,就變成:

ps:內聯元素,width,和height屬性都不起效的。

再看看例子:

html

style="

border

:1px

solid

#ff0000; width:400px; padding:10px;

">

我是內聯元素

style="

border

:1px

solid

#ff0000; width:400px; padding:10px;

">

我也是內聯元素

效果如下:

我們把其中乙個display設定成block時就會有:

很明顯的是,乙個標籤沒有說是一定是塊狀元素,當他的display屬性被設定了,就會改變他。

有一點要注意的是當原本是內聯元素的被設定float,也會變成呢個塊元素的,把上面的「我是內聯元素,設定為float:left,效果如:

你是否看出有點不同,和兩個都是塊元素,有區別。這裡不討論。

明白了什麼是塊狀元素,就會對什麼便簽能繼承什麼屬性,什麼便簽不能,就會有乙個認識,這裡最後乙個例子,是一些容易被人忽略的屬性繼承:

html:

style="

text

-indent

:2em

;border

:1px

solid

#ff0000; width:400px;

">

這是一級塊狀元素

style="

border

:1px

solid

#060

">

這是二級塊狀元素,這是突出效果的,沒別的意思,巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉

style="

border

:1px

solid

#0000ff

">

這是**塊狀元素

style="

background

-color

:#333; color:#ffffff;

">

這是內聯元素

效果:

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 字型系列屬性 font 組合字型 font family 規定元素的字型系列 font weight 設定字型的粗細 font size 設定字型的尺寸 font size繼承的是計算後的實際值 font style 定義字型的風格 font variant 設定小型大寫字母...

css中可繼承和不可繼承屬性

一 無繼承性的屬性 1 display 規定元素應該生成的框的型別 2 文字屬性 vertical align 垂直文字對齊 text decoration 規定新增到文字的裝飾 text shadow 文字陰影效果 white space 空白符的處理 unicode bidi 設定文字的方向 3...