Здравствуйте! Разобрался почти во всем задании (выполнил на 100%). Вот код
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}
}
.block2 {
margin: 18px;
padding: 20px;
}
/* Cтили, которые можно изменять */
Вопрос: почему для блоков не задана ширина, ведь она прописана только в body (520px), а свойство width - не наследуется?
блочные элементы по умолчанию растягиваются на всю ширину родителя
в пикселях это выглядит так: на блок1 (с маргинами-паддингами-бодером) приходится 520рх (вся width body). маргинов и паддингов у блок1 нет, есть только бордер, поэтому width будет 520-22=516px
блок2, в свою очередь тоже будет растягиваться на ширину родителя: т.е. на блок2 (с маргинами-паддингами-бордерами) будет 516рх. Бордеров у него нет, есть паддинги и маргины, поэтому на width остается 516-182-20*2=440рх
Т.е. мы рассчитываем что для блока-1 и блока-2 что width: auto, тогда получается что ширина складывается из маргинов бордера паддингов и ширины содержания. Просто смущает, что в коде мы для инпута ставили width: 100%.
Т.е. мы как-бы ставили width: auto для блока-1 и блока-2 (не указывали у них ширину вообще, т.е. принималось значение по умолчанию), width: 100% у инпута - это мы просто его растянули, потому что он не блочный элемент?
такой вопрос… Зачем в этом задании 3 класса(.block .block1 и .block2)?
вернее мне ясно зачем бл1 и бл2, но какая цель у “папы-блока”?Сбило меня с пути капитально и надолго…
ЗЫ >>>автору поста: про высоту и ширину, хороший вопрос, я решение начал именно с этого ракурса, о чем пожалел очень сильно, т.к. выстраивается крайне сложное решение относительно того, насколько быстро и просто его можно было выполнить .