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

simonenko · 17.Сентябрь.2014 16:14:28

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

Ortega · 14.Июнь.2015 12:22:09

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

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

XmaX · 21.Июль.2015 15:49:37

Базовые стили, изменять не нужно */
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;
} что не так?

felmike · 05.Май.2016 13:29:07

.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;
}

babulya · 26.Август.2016 13:45:33

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

exe · 30.Октябрь.2016 18:13:52

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

yuvmironov · 02.Январь.2017 20:00:48

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

На 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;
}

vadim.gladikov · 17.Февраль.2017 17:39:54

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

Frostmorn2000 · 17.Июнь.2017 08:54:54

Я сделал всё это лишь с помощью отступов, ширину и высоту не указывал 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;
}

lapkinjq · 27.Июнь.2017 18:14:33

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

svitlenocks · 17.Август.2018 07:58:39

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 вправо*/

monsodenisetony · 24.Апрель.2019 15:25:19

.block {
border: 2px solid white;
background: rgba(0, 255, 255, 0.2);
}

.block1 {
width:196px;
height:36px;
}

.block2 {
margin: 20px 0px 0px 120px;
padding: 10px 0px 12px 40px;
width: 96px;
height: 34px;
}

.block3 {
border: 12px solid white;
margin: 20px 0px 0px 20px;
padding: 5px 0px 5px 5px;
width: 171px;
height: 26px;
}

lisytnizza · 25.Сентябрь.2019 07:53:11

Скорее всего, вы имели в виду “внешние отступы”???

smus · 20.Июнь.2021 07:46:24

.block {background-color: rgba(0, 255, 255, 0.2)}
.block-1 {border: 20px solid white}
.block-2 {
padding: 20px;
margin: 20px
}
.text-input {box-sizing: border-box}

divanec25 · 26.Апрель.2022 20:52:47

/* Базовые стили, изменять не нужно */
.block {
background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
.block-1 {

height: 120px;
border: 20px solid white;
}

.block-2 {
margin-top: 20px;
margin-left: 20px;
width: 440px ;
height: 80px;

}
.text-input {
margin-top: 20px;
margin-left:20px;
height: 40px;
width: 380px!important;
}