2016-03-03 104 views
-1

在Chrome DevTools中我注意到了一件事,我不明白。 如果我只在CSS中設置寬度和高度,那麼div不會繼承任何屬性。爲什麼在CSS中沒有繼承

body { 
 
    width: 100%; 
 
    height: 100%; 
 
}
<body> 
 
    <div> 
 
    text 
 
    </div> 
 
</body>

在這種情況下DevTools我們可以看到 - DIV不`噸有從身體的任何繼承的屬性。 但如果我將字體大小添加到body - div繼承font-size,width和height屬性。

幫我理解,發生了什麼事?

+0

CSS使用框模型,您可能需要閱讀它 –

+0

它被繼承。嘗試改變'寬度:100px'而不是'100%'並檢查div現在只有'100px' – ketan

+2

@SatejS這與盒子模型無關。 – 2016-03-03 06:01:35

回答

1

默認情況下,寬度和高度值被設置爲自動。如果你想使用你的父應用到子的高度,那麼你需要明確地繼承他們:

body{ 
    height: 100%; 
} 
body > div{/*otherwise, it was auto height*/ 
    height: 100%; /*Or, inherit*/ 
} 

的事實:

w3cwidthheight定義繼承NO

您可以看到在css herehere in other SO answer中繼承的屬性列表。

方位邊界摺疊邊界間距標題邊顏色光標方向高程空單元字體家族字體大小字體樣式字體變體字體大小體重,字體,字母間距,行高,列表樣式圖像,列表樣式位置,列表樣式,列表樣式,孤兒,音高範圍,音調,引號,豐富程度,說話標題,說話,數字,講標點符號,說話,語音速度,壓力,文本對齊,文本縮進,文本轉換 知名度 語音家庭 量 空白 寡婦 字間距

4

CSS屬性可以是,也可以不是width未被繼承。 font-size是。有關繼承的信息,請參閱this MDN page

每個CSS屬性(如this one for font-size)的MDN頁面都會告訴您屬性是否被繼承。

因此,將font-size應用於body將導致(默認情況下)子元素具有相同的大小。相反,將width應用於身體不會將這種寬度應用於孩子(這是毫無意義的)。

相關問題