2016-03-03 2 views
-1

В Chrome DevTools я заметил одну вещь, которую я не могу понять. Если я устанавливаю только ширину и высоту тела в CSS, то div не наследует никакого свойства.Почему нет наследования в CSS

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

В этом случае в Devtools мы можем видеть - DIV Безразлично `имеет наследуемые свойства от тела. Но если я добавлю размер шрифта в тело - div унаследовал размер шрифта, ширину и высоту.

Помогите мне понять, что происходит?

+0

CSS использует коробчатую модель, вы можете прочитать на ней –

+0

Наследуется. Попробуйте изменить 'width: 100px' вместо' 100% 'и проверить div теперь только' 100px' – ketan

+2

@SatejS Это не имеет ничего общего с моделью окна. –

ответ

1

Значения ширины и высоты по умолчанию установлены на авто. Если вы хотите использовать высоту применяется в родителя к ребенку, то вам нужно явно наследовать их:

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

Факт:

Из w3cwidth и height определяются наследуется до NO.

Вы можете увидеть список свойств, которые унаследованы в css here и here in other SO answer.

азимут, пограничный коллапс, пограничный интервал, заголовок сторона, цвет, курсор, направление, высота, пустая-клетка, семейство шрифтов, размер шрифта, стиль шрифта, вариант шрифта, Font- вес, шрифт, межстрочный интервал, высоту строки, стиль списка, стиль списка, стиль списка, стиль списка, сироты, диапазон тангажа, тангаж, кавычки, насыщенность, говорить-цифра, говорит-пунктуацию, говорить, речь-скорость, стресс, выравнивание текста, текст-отступ, текст-преобразование видимости голос семьи объема белого пространства вдовы слово интервала

4

Свойства CSS: унаследовано или нет. width не наследуется. font-size есть. Информацию о наследовании см. В разделе this MDN page.

Страница MDN для каждого свойства CSS, такого как this one for font-size, сообщит вам, наследуется ли свойство или нет.

Следовательно, применение font-size к корпусу приведет к тому, что дочерние элементы (по умолчанию) будут иметь тот же размер. Напротив, применение width к телу не будет применять эту ширину к детям (что не имело бы смысла).

Смежные вопросы