Здравствуйте! Пока не понимаю как сделать 2-й блок. Не знаю правда правильно ли я сделал 1-й. Подскажите пожалуйста как сделать 2-й блок, особенно полупрозрачный фон второго блока, в который вставлено поле формы? Кстати, то что паддинг у первого блока 0, я обошел использовав !important, подозреваю, что это не правильно. Последний вопрос: наверное тут нужно испльзовать схлопывание но это число предположение основанное на интуиции?
полупрозрачный фон у вас уже прописан вот в этом правиле:
вот то, которое 0,2 - это и есть прозрачность
вам остается только придумать как сделать так, чтобы этот фон был виден (чтобы были отступы вокруг содержимого )
Сделал вот так! Вроде получилось. Но только в конце несовпадение у блока 2 нет паддинга справа. Что делать?
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}
Сделал с помощью внешних отступов (как я это вижу), но теперь все стало хуже, не совпадает не только правая сторона сторона формы, но и блоки. Что делать не знаю, подскажите!
Смотрите, у инпута с помощью атрибута стиль задана ширина 100%. Это означает, что как только мы инпуту добавим паддинг его размер будет уже 100%+паддинг, т.е. он будет “вылазить” за размеры блока2. Как с этим бороться - см. уроки 14/23 и 15/23
Вы все правильно поняли: паддинг блока1 и маржин блока 2 в этом случае взаимозаменяемы по функции. Но когда вы подбирали значения сразу и у вас был паддинг для блока1, вы определили значение 18рх. Значит, сейчас вам для блока2 надо было прописать маржин те же 18рх, а не 20
Поставил вроде box-sizing: border-box; но это не помогло поле формы перестало вылезать за первый блок, но осталось вылезание за второй + вылезание за внутренний отступ у второго. Что делать не знаю, подскажите. + Что-то не так с высотой поля формы (его надо уменьшить я так думаю в height селектора по атрибуту?).
Это в принципе простое, но очень важное для понимания основ блочной модели задание.
Первое, что нужно сделать - это написать box-sizing: border-box; для поля. Когда вы пропишете внутренние отступы для поля, то оно не будет больше увеличиваться по ширине и высоте.
А дальше остается подобрать отступы для блока2, внешние - чтобы оттолкнуть его от блока1 и внутренние - чтобы поле формы не прилипало к границам.