§10. Блочная модель документа


#1

Обсуждение курса «Блочная модель документа»


#2

НЕ ПОНИМАЮ Я КАК РАССЧИТЫВАТЬ ПИКСЕЛИ В ИСПЫТАНИИ С ТРЕМЯ БЛОКАМИ!!!
Если маленькие ячейки 20 на 20 то
высота третьего блока должна быть 60
(три кубика)
а в коментах пишут что 26
Так как быть? Методом тыка подбирать?
а не слишком ли енто долго и нужно?
отладьте линейку млииииин!

У людей нервы не железные однако
да и само качество картинки образца хромает
сетку на ней видна плохо очень уж


#3
  • Базовые стили, изменять не нужно */
    html, body{
    margin:0;
    padding:0;
    }

body{
width:260px;
min-height:210px;
padding:20px;
font-family:“Arial”, sans-serif;
font-size:14px;
line-height:1.5;
color:white;
background-color:#3A78A1;
background-image:url(’/assets/course9/grid.png’);
background-repeat:repeat;
background-position:-80px -80px;
}
input[type=“text”]{
height:38px;
font-size:18px;
font-family:sans-serif, “Arial”;
border:2px solid #ccc;
border-radius:5px;
}
.block{
background:rgba(0, 255, 255, 0.2);
}

/* Cтили, которые можно изменять */
.block1{
box-sizing:border-box;
border:2px solid white;

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

}
input[type=“text”] {
box-sizing:border-box;
margin:20px;
padding-left:10px;
} что не так?


#5

.block1 {
box-sizing:border-box;
border:2px solid white;
}
.block2{
box-sizing:border-box;
margin: 18px;
}
input[type=“text”] {
width: 440px !important;
box-sizing:border-box;
margin: 20px;
padding-left:10px;
}


#6

Добрый день. Вы в стайлгайде пишите (http://html-academy.ru/codeguide/#css-order) о разделении свойств. Есть какой-то список где все свойства разделены по вашему варианту?
Например не ясно /* Блочная модель */ тот же бордер также участвует в размере блока и бокс сайзинг, но бордер стоит в оформлении, бокс сайзинг вообще не понятно где. Подскажите более точное распределение


#7

Кто разжует 10 задание ("«Выпадание» внешних отступов ")? Что то не как не догоню теорию :slight_smile: Буду благодарен.


#8

Восьмое испытание с трем блоками и сеткой.

На 100%.

.block2 {
box-sizing: border-box;
width: 140px;
margin-left: 120px;
margin-top: 20px;
padding-top: 10px;
padding-left: 40px;
padding-bottom: 25px;
}
.block3{
box-sizing: border-box;
border-width: 12px;
margin-top: 20px;
margin-left: 20px;
width: 200px;
height: 60px;
padding-top: 5px;
padding-left: 5px;
}


#9

Вся “соль” в том, что размер блока действительно занимает 60px, но следует учитывать что через width и height задаётся размер СОДЕРЖИМОГО. Т.е. чтобы правильно указать эти величины, нужно из общего размера блока (60 px) вычесть две толщины рамки - border (верхняя-нижняя или левая-правая толщины) и два внутренних отступа - padding (верхний-нижний или левый-правый). Полученный результат и будет значением height либо width.


#10

Я сделал всё это лишь с помощью отступов, ширину и высоту не указывал 100% результат, так же можно?
.block1 {
margin: 0px 340px 20px 0px;
padding: 0px 0px 15px 0px;
}

.block2 {
margin: 0px 280px 20px 120px;
padding: 10px 0px 25px 40px;
}

.block3 {
border-width: 12px;
margin: 0px 320px 0px 20px;
padding: 5px 0px 10px 5px;
}


#11

Не честно использовать box-sizing: border-box; Потому что с 1 по 8 задание нам не рассказывали про box-sizing: border-box;:grin:


#12

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(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}

input[type=“text”] {
height: 38px;

font-size: 18px;
font-family: inherit;

border: 2px solid #cccccc;
border-radius: 5px;
}

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

.block1 {
border: 2px solid white; /* Задаете рамку первому блоку*/

}

.block2 {
padding: 20px; /* Задаете внутренний отступ от поля с текстом, которое расположено в блоке 1*/
margin: 18px; /* Задаете внешний отступ, 18px потому что рамка отнимает 2px*/

} /* Вот, собственно, получилась “оболочка”, теперь нужно разобраться с текстовым полем*/

input[type=“text”] {
box-sizing: border-box; /* Обязательно задаем, чтобы поле ввода вписывалось в наши размеры*/
padding-left: 10px; /* Двигаем текст на 10px вправо*/