inherit與auto

大家是不是和我一樣,在剛開始學習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,等,很多。

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

默認繼承的有:

不繼承的有:




發佈了47 篇原創文章 · 獲贊 4 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章