Могут ли быть разными значения дочерних и родительских элементов?

Question

[c4jn]

здравствуйте, прошу, помогите разобраться новичку.
пытаюсь понять зависимость дочерних и родительских элементов, а именно: правильно ли я понимаю, что при установлении например ширины 50% у дочернего, это будет зависеть от ширины родителя? если у родителя установлено 50% , то грубо говоря у дочернего получится 25% от всей "страницы"?
что в таком случае с px и vw/hw? Как будут установлены значения в этом случае у дочерних?
если например у родителя 80px то у дочернего будет от этих 80 отниматься?
и с vw/hw не понятно (((
надеюсь на вашу помощь

Answer 1

[Дмитрий Беляев]

правильно ли я понимаю, что при установлении например ширины 50% у дочернего, это будет зависеть от ширины родителя?

правильно, проценты считаются от родителя

если у родителя установлено 50% , то грубо говоря у дочернего получится 25% от всей "страницы"?

если родителем родителя будет body, то да

если например у родителя 80px то у дочернего будет от этих 80 отниматься?

да

и с vw/hw не понятно

vw и vh - это проценты от ширины вьюпорта и от высоты вьюпорта соответственно, расшифровывается как ViewportWidth и ViewportHeight

Comments

[c4jn]

спасибо вам за ответ!
правильно ли я понимаю, что в "минус" уйти нельзя? то есть у родителя не может быть меньше значения чем у дочернего?

насчет "vh" ошиблась( но со значениями вьюпорта такие же правила?

[Дмитрий Беляев]

правильно ли я понимаю, что в "минус" уйти нельзя?

c4jn, не совсем. С position: static (это значение по умолчанию) и у родителя и у потомка оно будет так, потомок будет растягивать родителя. Но с другой комбинацией position поведение может быть другим. Поэкспериментируйте с различными сочетаниями position у родителя и потомка.
Например если вложить position: absolute в position: relative то вполне можно сделать, чтоб у родителя был вообще нулевой размер, но при этом потомок был любого размера.

Так же еще можно поиграться со свойствами группы overflow, они тоже могут менять это поведение.

со значениями вьюпорта такие же правила?

Нет, вьюпорт - это непосредственно область отрисовки страницы, на размеры которой может влиять только пользователь браузера, но не мы из кода. Яркий пример - на большинстве страниц есть скролл из-за того что элемент body не помещается во вьюпорт.

[c4jn]

Дмитрий Беляев, поняла, спасибо! буду экспериментировать)

[Ankhena]

С position: static (это значение по умолчанию) и у родителя и у потомка оно будет так

Да и static никак не мешает дочернему вывалится из родительского.
https://jsfiddle.net/37egcxo2/

А уж дочерние флексбоков как хорошо вываливаются..

[c4jn]

Ankhena, ого! спасибо вам за наглядный пример)