Наследование в свойствах CSS

Здесь В этом примере у меня есть два раздела, в которых один вложен в другой. Я называю внешнее разделение родителем и разделение, в которое вложен ребенок.Наследование в свойствах CSS

CSS

/* for parent div tag*/ 
#parent{ 
     width: 500px; 
     height: 300px; 
     z-index: 1; 
     background-color: #CCC; 
     border:thin solid black; 
     margin:25px; 
     padding:20px; 
} 

/* for child div tag */ 
#child{ 
     border:thin solid #F00; 
     height:50px; 
     background-color:#FFC; 
}

HTML

<!-- Start of parent tag --> 
<div id="parent"> 
<p> This is parent div tag. </p> 

<!-- Child div tag --> 
<div id="child"> 
<p> This is child div tag. </p> 
</div> 

<!-- End of parent tag. --> 
</div>

Похоже, это в веб-браузере:

enter image description here

Мой Questio n: Как дочерний тег div получает размер его ширины? Это из-за наследования из родительского тега div или по умолчанию оно по умолчанию будет расширяться до родительского контейнера div, если вы не укажете ширину?

источник

2013-09-29 cpx

Это поведение по умолчанию для всех дисплеев: элементы блока растягиваются, насколько позволяет родительский контейнер, да. –

вот простой тест, где ширина не установлена для родителя: http: // jsfiddle.сеть/crazytonyi/XxNnu/2 / – Anthony

Ширина не может быть унаследована. То, что вы видите, является поведением по умолчанию.

See the specs on block level elements

«Каждый элемент уровня блока генерирует главный структурный блок, который содержит дочерние коробки и генерируемое содержимое, а также коробку, участвующую в любой схеме позиционирования.» - W3C

По умолчанию элементы блока имеют ширину 100%. Это означает, что если ширина не указана, это будет 100% родителя.

В этом случае ширина родителя равна 542px.

Расчет основан на width:500px; + padding-left:20px; + padding-right:20px; + border 2px;

enter image description here

Ширина ребенка является именно 500px. (100% родителей - минус padding/border).

enter image description here

jsFiddle here Вы можете играть с ней и осмотрите элементы.

источник

2013-09-29 20:45:28

Да, элементы уровня блока будут расширяться до той ширины, которую родитель предоставит им (ширина минус прокладка).

Редактировать: если вы хотите, чтобы ребенок имел только ширину, содержащую его, добавьте к нему display: inline-block (также проверьте here).

источник

2013-09-29 20:28:23 LinkinTED

Да, по умолчанию элемент div является элементом блока. И поскольку вы не указали ширину, ее значение будет «авто». Это означает, что браузер вычисляет ширину и обычно составляет 100% от ширины родительского элемента.

источник

2013-09-29 20:34:09 Krasimir

Наследование в свойствах CSS

ответ

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