Помогите с 16 Испытание 2

Курсы §10. Блочная модель документа
1

Здравствуйте! Пока не понимаю как сделать 2-й блок. Не знаю правда правильно ли я сделал 1-й. Подскажите пожалуйста как сделать 2-й блок, особенно полупрозрачный фон второго блока, в который вставлено поле формы? Кстати, то что паддинг у первого блока 0, я обошел использовав !important, подозреваю, что это не правильно. Последний вопрос: наверное тут нужно испльзовать схлопывание но это число предположение основанное на интуиции?

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
}

.block {
background: rgba(0, 255, 255, 0.2);
}

.block1{
width: 476px;
height: 76px;
padding: 20px 20px !important;
border: 2px solid white;
}

2

полупрозрачный фон у вас уже прописан вот в этом правиле:

вот то, которое 0,2 - это и есть прозрачность
вам остается только придумать как сделать так, чтобы этот фон был виден (чтобы были отступы вокруг содержимого :wink: )

3

Сделал вот так! Вроде получилось. Но только в конце несовпадение у блока 2 нет паддинга справа. Что делать?
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

input[type=“text”] {
height: 32px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
padding-left: 10px;
}

.block {
background: rgba(0, 255, 255, 0.2);
}

.block1 {
border: 2px solid white;
padding: 18px !important;
}

.block2 {
padding: 20px !important;
}

4

все гораздо проще и без !important (кстати, зачем вы прописываете !important для block2? для него же паддинги нигде не предопределены)

“Оттолкнуть” содержимое от границ блока можно двумя способами:

  1. с помощью внутренних отступов блока (в нашем случае не сработает, т.к. отступы предопределены как 0 в атрибуте style)
  2. с помощью внешних отступов содержимого

А что с формой? Надпись “Значение поля” совпадает с образцом? судя по коду - не должна…

5

Имя файла изображения1366×720 119 KB

Надпись совпадает

6

Сделал с помощью внешних отступов (как я это вижу), но теперь все стало хуже, не совпадает не только правая сторона сторона формы, но и блоки. Что делать не знаю, подскажите!

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
margin: 20px;
}

.block {
background: rgba(0, 255, 255, 0.2);
}

.block1 {
border: 2px solid white;

}

.block2 {
margin: 20px;
}

7

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
margin: 20px;
}

.block {
background: rgba(0, 255, 255, 0.2);
}

.block1 {
border: 2px solid white;

}

.block2 {
margin: 20px;
}

8

Смотрите, у инпута с помощью атрибута стиль задана ширина 100%. Это означает, что как только мы инпуту добавим паддинг его размер будет уже 100%+паддинг, т.е. он будет “вылазить” за размеры блока2. Как с этим бороться - см. уроки 14/23 и 15/23

1 лайк
9

Вы все правильно поняли: паддинг блока1 и маржин блока 2 в этом случае взаимозаменяемы по функции. Но когда вы подбирали значения сразу и у вас был паддинг для блока1, вы определили значение 18рх. Значит, сейчас вам для блока2 надо было прописать маржин те же 18рх, а не 20

10

Поставил вроде box-sizing: border-box; но это не помогло поле формы перестало вылезать за первый блок, но осталось вылезание за второй + вылезание за внутренний отступ у второго. Что делать не знаю, подскажите. + Что-то не так с высотой поля формы (его надо уменьшить я так думаю в height селектора по атрибуту?).

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
margin: 17px;
padding: 0 10px;
box-sizing: border-box;
}

.block {
background: rgba(0, 255, 255, 0.2);
}

.block1 {
border: 2px solid white;

}

.block2 {
margin: 18px;
box-sizing: border-box;
}

11

Это в принципе простое, но очень важное для понимания основ блочной модели задание.
Первое, что нужно сделать - это написать box-sizing: border-box; для поля. Когда вы пропишете внутренние отступы для поля, то оно не будет больше увеличиваться по ширине и высоте.
А дальше остается подобрать отступы для блока2, внешние - чтобы оттолкнуть его от блока1 и внутренние - чтобы поле формы не прилипало к границам.

1 лайк
12

Свойство box-sizing: border-box; надо было только для формы прописать - чтобы можно было делать отступы и обойти width:100%