inherit與auto

勤勞的插秧哥發表於2014-11-03

大家是不是和我一樣,在剛開始學習css的時候,在css檔案開頭是不是經常看到這樣的程式碼: * {margin:0 px; padding:0 px;}  。 在接下來設定顏色字型時在body元素的css樣式中是不是又經常看到這樣的程式碼:body{ color:顏色值}  如果子元素沒有特別宣告的話,整篇網頁的文字都是這種顏色。


如今我恍然大悟,原來開頭就來這段程式碼就是取消掉所有元素的預設內外邊距。預設的屬性即本文標題中的auto。接著在body中設定字型顏色color後通篇文字都是該顏色,這就是標題中的inherit(繼承父元素的屬性)。繼承並不單繼承父元素,也包括父元素的父元素,也就是祖元素。

這麼一來,腦海中就能浮現出經常使用的元素屬性中哪些是預設不繼承auto,哪些是預設繼承inherit。

常見的預設繼承的有字型,包括font-size,font-family,font-weight等,還有上面提到的color,還有透明度opacity,這個深有體會,之前把一個<div>設定為半透明,結果,<div>中的其他子元素也都跟著透明瞭。

常見的預設不繼承的有margin,還有padding,width,height還有display,等,很多。

下圖是業內大牛司徒正美總結的(這是司徒哥的原文):

預設繼承的有:

不繼承的有:




相關文章