arey1983

7 лет назад

Академия: Курс Сodecademy - Learn HTML & CSS - Блочная модель CSS Box

Всем доброго времени суток и хорошего настроения! Продолжаю изучать курс online-образовательного портала Сodecademy - "Learn HTML & CSS".

Блочная модель CSS Box

В этом уроке будет рассмотрена блочная модель, так называемая CSS Box. Изучив которую, мы сможем понять как элементы позиционируются и отображаются на веб-сайте.

Все элементы на веб-странице интерпретируются браузером как "живые" внутри блока. Например, когда мы меняем цвет фона элемента, мы меняем цвет фона всего его поля.

Далее будут рассмотрены следующие свойства блочной модели:

размеры блока элемента.
границы элемента.
поля блока элемента.
отступы блока элемента.

Блочная модель

Любой блочный элемент состоит из набора свойств, подобно матрешкам вложенных друг в друга:

width - определяет ширину области содержимого;
height - определяет высоту области содержимого;
padding - поля, создают пустое пространство от контента до внутреннего края границ;
border - определяет толщину и стиль границы;
margin - отступы, определяют невидимое пустое пространство от внешнего края границ.

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

Содержимое элемента имеет два размера - высоту и ширину, свойства которых в CSS можно менять.

p {
height: 80px;
width: 240px;
}

В этом примере высота и ширина абзаца установлены в значения 80 пикселей и 240 пикселей соответственно.

Границы

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

width - толщина границы, может быть задана в пикселях или с одним из следующих ключевых параметров: thin (тонкая), medium (средняя), или thick (толстая).
style - стиль границы. Веб-браузеры могут отображать любой из 10 разных стилей, среди которых: none (без стиля), dotted (пунктирная) и solid (сплошная).
color - задает цвет границы. Веб-браузеры могут отображать цвета, используя для этого различные форматы.

p {
border: 3px solid coral;
}

В приведенном выше примере граница имеет ширину 3 пикселя, является сплошной и имеет цвет коралла. Все три свойства задаются в одной строке кода.

Если ширина, стиль или цвет не заданы в файле CSS, веб-браузер назначает значение по умолчанию для этого свойства.

p.content-header {
height: 80px;
width: 240px;
border: solid coral;
}

В этом примере стиль границы установлен в значение - сплошная, а цвет - в коралл. Ширина не установлена, поэтому она используется по умолчанию.

Свойство: border-radius

Благодаря CSS граница не обязательно должна быть квадратной. Чтобы установить скругления углов поля элемента мы можем применить свойство border-radius.

div.container {
border: 3px solid rgb(22, 77, 100);
border-radius: 5px;
}

Код в приведенном выше примере скругляет все четыре угла границы на значение 5 пикселей.

Чтобы создать границу, которая является идеальным кругом, необходимо установить радиус равным высоте поля или 100%.

div.container {
height: 60px;
width: 60px;
border: 3px solid rgb(22, 77, 100);
border-radius: 100%;
}

Код в приведенном выше примере создает div, который является идеальным кругом.

Поля: padding

Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

В CSS можно менять значение данного расстояния с помощью свойства padding.

p.content-header {
border: 3px solid coral;
padding: 10px;
}

Код в этом примере помещает 10 пикселей свободного пространства между содержимым абзаца и границами всех четырех сторон блока.

Свойство padding позволяет задать величину поля сразу для всех сторон элемента:

padding-top - отступ сверху;
padding-right - отступ справа;
padding-bottom - отступ снизу;
padding-left - отступ слева.

p.content-header {
border: 3px solid fuschia;
padding-bottom: 10px;
}

В приведенном выше примере только нижняя часть содержимого абзаца будет отстоять от границы на расстояние 10 пикселей.

Другая реализация свойства padding позволяет точно указать в одном объявлении, сколько и какие отступы должны быть проставлены от каждой стороны содержимого блока.

p.content-header {
border: 3px solid grey;
padding: 6px 11px 4px 9px;
}

В приведенном выше примере четыре значения 6px, 11px, 4px, 9px соответствуют значениям отступов по часовой стрелке (верхнее-правое-нижнее-левое).

Однако, если верхнее и нижнее значения будут равны друг другу, а левое и правое значения также будут равны друг другу, можно использовать следующий синтаксис:

p.content-header {
padding: 5px 10px;
}

Первое значение, 5px, определяет отступы для верхней и нижней границ. Второе значение, 10px, определяет отступы для левой и правой границ.

Отступы: margin

Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

В CSS можно менять значение данного пространства с помощью свойства margin.

p {
border: 1px solid aquamarine;
margin: 20px;
}

Код в приведенном выше примере, задает 20 пикселей свободного пространства со всех четырех сторон от блока параграфа.

Чтобы быть более конкретными в отношении количества отступов с каждой стороны блока, мы можем использовать следующие свойства:

margin-top - отступ сверху;
margin-right - отступ справа;
margin-bottom - отступ снизу;
margin-left - отступ слева.

p {
border: 3px solid DarkSlateGrey;
margin-right: 15px;
}

В приведенном выше примере только правая часть поля параграфа будет иметь значение отступа 15 пикселей.

Аналогичная с padding, реализация свойств margin используется для того, чтобы точно указать в одном объявлении, сколько и какие отступы должны быть проставлены от границ блока.

p {
margin: 6px 10px 5px 12px;
}

В приведенном выше примере четыре значения 6px, 10px, 5px, 12px соответствуют значениям отступов по часовой стрелке (верхнее-правое-нижнее-левое).

Если верхнее и нижнее значения будут равны друг другу, а левое и правое значения также будут равны друг другу, можно использовать следующий синтаксис:

p {
margin: 6px 12px;
}

Первое значение, 6px, определяет отступы для верхней и нижней границ. Второе значение, 12px, определяет отступы для левой и правой границ.

Центрирование

Свойство margin также позволяет нам центрировать содержимое.

div {
margin: 0 auto;
}

В приведенном выше примере margin: 0 auto; - будет центрировать содержимое контейнера div. 0 - устанавливает значения отступов от верхнего и нижнего полей в 0 пикселей. Автоматическое значение auto - указывает браузеру корректировать левое и правое поля, пока содержимое не будет центрировано внутри своего блока.

Чтобы центрировать элемент, для него должна быть задана ширина.

Невозможно центрировать элемент, который занимает всю ширину страницы.

div.headline {
width: 400px;
margin: 0 auto;
}

В приведенном выше примере ширина div устанавливается в значение 400 пикселей, что меньше ширины большинства экранов. Это приведет к тому, что div будет находиться внутри элемента шириной более 400 пикселей.

Свертывание отступов

Как можно было заметить, padding - это пространство, добавленное внутри границ элемента, в то время как margin - пространство, добавленное за границами элемента. Еще одно отличие заключается в том, что верхние и нижние отступы, также называемые вертикальными, свертываются, а верхнее и нижнее поля - нет.

Горизонтальные отступы (слева и справа), всегда отображаются и складываются вместе. Например, если два div с идентификаторами # div-one и # div-two расположены рядом друг с другом, то они будут находиться так далеко друг от друга, каковой является значение суммы их смежных отступов.

#img-one {
margin-right: 20px;
}

#img-two {
margin-left: 20px;
}

В этом примере пространство между границами # img-one и # img-two составляет 40 пикселей.

В отличие от горизонтальных отступов, вертикальные отступы не складываются. Вместо этого большее значение из двух вертикальных отступов устанавливает расстояние между соседними элементами.

#img-one {
margin-bottom: 30px;
}

#img-two {
margin-top: 20px;
}

В этом примере размер вертикального отступа между элементами # img-one и # img-two составляет 30 пикселей. Хотя сумма отступов составляет 50 пикселей, margin сворачивается, поэтому интервал зависит только от нижнего отступа # img-one.

Минимальная и максимальная высота и ширина

Поскольку веб-страницу можно просматривать с помощью дисплеев различного размера экрана, позиционирование содержимого на веб-странице из-за этого может сильно отличаться.

Чтобы избежать этой проблемы, CSS предлагает два свойства:

min-width - устанавливает минимальную ширину элемента;
max-width - устанавливает максимальную ширину элемента.

p {
min-width: 300px;
max-width: 600px;
}

В приведенном выше примере минимальная ширина всех параграфов не будет уменьшаться ниже 300 пикселей, а максимальная ширина не будет превышать 600 пикселей.

Любой контент, как и текст, может стать трудным для чтения, когда окно браузера сужается или расширяется. Эти два свойства обеспечивают четкость содержания, ограничивая минимальную и максимальную ширину элемента.

Мы также можем ограничить минимальную и максимальную высоту элемента.

min-height - устанавливает минимальную высоту элемента;
max-height - устанавливает максимальную высоту элемента.

p {
min-height: 150px;
max-height: 300px;
}

В приведенном выше примере минимальная высота всех параграфов не будет уменьшаться ниже 150 пикселей, а максимальная высота не будет превышать 300 пикселей.

Свойство: overflow

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Может принимать следующие значения:

hidden - отображается только область внутри элемента, остальное будет скрыто;
scroll - при установке этого значения в поле элемента будет добавлена полоса прокрутки;
visible - отображается все содержание элемента, даже за пределами установленной высоты и ширины.

p {
overflow: scroll;
}

В приведенном выше примере, если что-либо из содержимого параграфа целиком не помещается в область заданных размеров, то появится полоса прокрутки.

Сброс настроек по умолчанию

Все основные веб-браузеры имеют таблицу стилей по умолчанию, которую они используют в отсутствие внешней таблицы стилей.

Многие разработчики сбрасывают эти значения по умолчанию, чтобы они могли действительно работать с чистым списком.

* {
margin: 0;
padding: 0;
}

Код в приведенном выше примере сбрасывает значения по умолчанию для всех элементов HTML. Это часто первое правило CSS во внешней таблице стилей.

Если значения свойств элементов установлены в 0, то они не требуют единиц измерения.

Видимость: visibility

Элементы можно скрывать из вида с помощью свойства visibility, которому может быть присвоено одно из следующих значений:

hidden - скрывает элемент;
visible - отображает элемент.

<ul>
<li>Explore</li>
<li>Connect</li>
<li class="future">Donate</li>
<ul>

.future {
visibility: hidden;
}

В приведенном выше примере элемент списка с классом future будет скрыт от просмотра в браузере.

Подводим итоги

Давайте посмотрим чему мы научились и что нового мы для себя узнали:

Блочная модель содержит набор свойств, используемых для создания пространства вокруг и между элементами HTML.
Высота и ширина области содержимого могут быть заданы в пикселях или в процентах.
Цвет, стиль и толщина границы могут быть заданы с помощью свойств CSS.
Поле (padding) - пространство между областью содержимого и границей. Его можно установить в пикселях или процентах.
Отступ (margin) - пространство от границы текущего элемента до внутренней границы его родительского элемента.
Значения смежных горизонтальных отступов складываются.
Вертикальные отступы сворачиваются, поэтому пространство между смежными элементами будет равно большему значению.
margin: 0 auto - горизонтально центрирует элемент внутри своей родительской области.
Свойство overflow управляет отображением содержания блочного элемента.
Свойство visibility может скрывать или показывать элементы.

Свое мнение и личные впечатления

Чем дальше изучаю данный курс, тем интереснее становится. Правда 20.09 курс Learn HTML & CSS порталом Сodecademy был разделен на 2 части Learn HTML и Learn CSS соответственно, что при прохождении мне доставило некоторые неудобства (пришлось заново проходить некоторые части).

На этом занятии я узнал о четырех свойствах блочной модели: высоте и ширине, границах, полях и отступах. Считаю, что для веб-разработчика, понимание блочной модели является критически важным навыком, а для новичка еще одним шагом на пути к изучению более продвинутых тем HTML и CSS.