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。

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

<div style="border:1px solid #ff0000;">
這是父節點

    <p>
         這是子節點

    </p>

</div>

  效果如下:

如果子節點能繼承父節點的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 style="border:1px solid #ff0000; width:400px; padding:10px;">這是塊狀元素</div>
<div style="border:1px solid #ff0000; width:400px; padding:10px;">這也是塊狀元素</div>

 效果如下:

 

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

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

<span style="border:1px solid #ff0000; width:400px; padding:10px;">我是內聯元素</span>
<span style="border:1px solid #ff0000; width:400px; padding:10px;">我也是內聯元素</span>

  效果如下:

我們把其中一個display設置成block時就會有:

很明顯的是,一個標簽沒有說是一定是塊狀元素,當他的display屬性被設置了,就會改變他。
有一點要注意的是當原本是內聯元素的被設置float,也會變成呢個塊元素的,把上面的“我是內聯元素,設置為float:left,效果如:

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

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

 

<div style="text-indent:2em; border:1px solid #ff0000; width:400px;">
這是一級塊狀元素
	<div style="border:1px solid #060">
    	這是二級塊狀元素,這是突出效果的,沒別的意思,巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
		<p style=" border:1px solid #0000ff">
	    	這是三級塊狀元素
	    	<span style="background-color:#333; color:#ffffff;">
	        	這是內聯元素
	        </span>
	    </p>
    </div>
</div>

  

text-indent:文本縮進,這是一個比較少用的屬性,它是一段文本的第一行縮進多少個像素,或字符。很明顯它是一個文本編輯的屬性,但有些人會把它當成間距屬性使用,這樣子做其實是很怪誕的:
第一,你不可保證,那段文字,永遠都只有一行。
第二,定義為text-indent的子節點是塊狀元素,會繼承這個屬性的,但而其他人接受你寫的css后,多數的時候都不會預計到子節點繼承text-indent屬性,而去修改。
為了避免這種不可預計的繼承,你可以用padding,來代替text-indent,而不是,你發現這個屬性,覺得很新奇,一時童心未泯地用。

原文轉載自http://blog.163.com/yhwwen@126/blog/static/170468853201326421822/

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM