Theory and Tasks for Students - Spring 2019
Box Model

Любой элемент на странице представляет собой прямоугольную "коробку", состоящую из четырёх слоёв - содержание content, внутренний отступ padding, рамка border и внешний отступ margin.

margin
border
padding
content

Содержание элемента вместе с его дочерними элементами определяют размеры коробки контента. Остальные параметры задаются через соответствующие стили. Размером строчных элементов можно управлять с помощью, например, определения размера высоты строк текста line-height и размера шрифта font-size, размеры блочных и других элементов можно определять через дополнительные стили.

Высота и ширина

width и height задают размеры блочного элемента; max-width, max-height задают верхнюю границу размера, ограничивая увеличение элемента, например, из-за контента; min-width, min-height задают нижнюю границу размера, ограничивая уменьшение элемента, например, из-за размеров окна. Если содержанию элемента необходимо больше места, чем определено, оно выйдет за границы элемента, что зачастую является нежелательным эффектом и считается ошибкой в вёрстке/дизайне.

.class-1 { width: 50%; background: #222; } .class-2 { height: 20px; background: #111; } .class-3 { width: 20px; height: 6pt; background: #d66; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

Внутренний отступ

padding задаёт внутренний отступ с каждой стороны. Указать можно от одного до четырёх значений в порядке top [right [bottom [left]]]. Кроме того, если стороне не указано значение, оно копируется из другой стороны:

  • padding: 1em             равносильно padding: 1em 1em 1em 1em;
  • padding: 1em 2em         равносильно padding: 1em 2em 1em 2em;
  • padding: 1em 2em 3em     равносильно padding: 1em 2em 3em 2em;
  • padding: 1em 2em 3em 4em.

Такой формат значения называют 1-to-4-value и он используется в некоторых других аналогичных свойствах, например, при определении размера рамки элемента или внешнего отступа.

Каждый отдельный отступ можно задать с помощью стилей padding-top, padding-right, padding-bottom и padding-left. К пространству внутреннего отступа применяется фон контента. У разных элементов может быть задан внутренний отступ по умолчанию, например, у списка <ul>.

.class-1 { background: #6ad; padding: 1em; } .class-2 { background: #d66; padding: 1px 0 0 0; } .class-3 { background: #6d6; padding: 0 1em 2em; } <div class="class-1"> <div class="class-2"></div> <div class="class-3"> class-3 </div> </div>
class-3

Рамка

Семейство border задаёт параметры рамки - толщину со всех четырёх сторон, стиль линии, цвет в порядке width style color. Используя отдельные стили можно определять значения для каждой стороны:

  • border-width - задаёт толщину рамки в формате 1-to-4; для определения размера рамки только с одной стороны можно использовать стили вида border-side-width, например border-top-width: 1px;
  • border-style - задаёт стиля линии рамки в формате 1-to-4; так же существуют свойства для определения стиля рамки для конкретной стороны; возможные значения - none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
  • border-color - задаёт цвет рамки в формате 1-to-4; так же существуют свойства для определения стиля рамки для конкретной стороны.

Кроме этого, существует стиль border-radius позволяющий задать радиус закругления углов элемента. Формат схож с 1-to-4 - top-left [top-right [bottom-right [bottom-left]]]. Распространённое применение - создание абсолютно круглых элементов с помощью border-radius: 50% - таким образом, радиус закругления с каждой стороны равен половине длины этой стороны.

С помощью стиля border-image можно определять картинку, которую клиент будет использовать в качестве текстуры при отрисовке линий и углов. Фон контента применяется к области рамки и будет виден, если её цвет имеет прозрачность или используется изображение с прозрачностью.

.class-1 { background: #222; padding: 1em; border: 1em solid black; /* равносильно * border-width: 1em; * border-style: solid; * border-color: black; */ } .class-2 { width: 5em; height: 5em; background: #333; border: 1px solid #d66; /* переопределение толщины рамки */ border-width: 1px 0 0 1px; border-radius: 50%; } .class-3 { background: #111; border-width: 1px 2px 3px 4px; border-style: solid dashed dotted double; border-color: #6d6 #dd6 #d66 #66d; border-bottom-left-radius: 15px; } <div class="class-1"> <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-2
class-3

Внешний отступ

margin задаёт внешний отступ с каждой стороны в формате 1-to-4 и используется для создания пустого пространства между соседними элементами и между элементом и внутренним отступом его родителя. Имеется ряд отличий по сравнению с рамкой и внутренним отступом:

  • Значения могут быть отрицательными - элементы начнут наезжать друг на друга;
  • Область внешнего отступа не окрашивается фоном элемента;
  • Область внешнего отступа не взаимодействует с курсором - т.е. не переключается псевдокласс :hover и не выстреливают соответствующие события JavaScript;
  • Значение auto для левого и правого отступа позволяет горизонтально центрировать элемент, у которого явно определена ширина;
  • Внешние отступы элементов могут коллапсировать в один общий отступ, равный максимальному из двух;
  • Внешние отступы элементов могут выходить за границы родительского элемента и, таким образом, сдвигать весь родительский элемент.
.class-1 { background: #222; } .class-2 { width: 50%; margin: 5px auto; background: #d66; } .class-3 { /* коллапсируется с margin-bottom у class-2 */ margin-top: 10px; background: #66d; } .class-4 { marign-top: -0.5em background: #6d68; } <div class="class-1"> <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> <div class="class-4"> class-4 </div> </div>
class-2
class-3
class-4

Box Sizing

box-sizing имеет два поддерживаемых значения - content-box | border-box. Значение по умолчанию content-box определяет стандартное поведение свойства width и height - они задают размер этого самого "контент-бокса". Значение border-box позволяет с помощью тех же свойств задавать размер части "коробки" элемента вместо с контентом, внутренним отступом и рамкой, отсюда и название. Т.е., например, ширина содержания элемента будет рассчитываться как значение width минус толщина рамки слева и справа и минус значение внутреннего отступа слева и справа. Значений padding-box и margin-box не существует.

.class-1, .class-3 { width: 50%; padding: 1em; border: 2px solid #d66; margin: 0 auto; background: #333; } .class-2, .class-4 { background: #66d; } .class-3 { box-sizing: border-box; } <div class="class-1"> <div class="class-2"> class-2 </div> </div> <div class="class-3"> <div class="class-4"> class-4 </div> </div>
class-2
class-4