Академия: Курс Сodecademy - Learn HTML & CSS - Блочная модель CSS Box
![](https://img.golos.io/proxy/https://s26.postimg.org/872b2258p/html-css.jpg)
Все элементы на веб-странице интерпретируются браузером как "живые" внутри блока. Например, когда мы меняем цвет фона элемента, мы меняем цвет фона всего его поля.
Далее будут рассмотрены следующие свойства блочной модели:
- размеры блока элемента.
- границы элемента.
- поля блока элемента.
- отступы блока элемента.
![](https://img.golos.io/proxy/https://s26.postimg.org/x5ystupc9/New-_Mind-_Map06.jpg)
Блочная модель
- width - определяет ширину области содержимого;
- height - определяет высоту области содержимого;
- padding - поля, создают пустое пространство от контента до внутреннего края границ;
- border - определяет толщину и стиль границы;
- margin - отступы, определяют невидимое пустое пространство от внешнего края границ.
![](https://img.golos.io/proxy/https://s26.postimg.org/p5vxy6nd5/matreshka.jpg)
Высота и ширина
p {
height: 80px;
width: 240px;
}
Границы
width - толщина границы, может быть задана в пикселях или с одним из следующих ключевых параметров: thin (тонкая), medium (средняя), или thick (толстая).
style - стиль границы. Веб-браузеры могут отображать любой из 10 разных стилей, среди которых: none (без стиля), dotted (пунктирная) и solid (сплошная).
color - задает цвет границы. Веб-браузеры могут отображать цвета, используя для этого различные форматы.
p {
border: 3px solid coral;
}
Если ширина, стиль или цвет не заданы в файле CSS, веб-браузер назначает значение по умолчанию для этого свойства.
p.content-header {
height: 80px;
width: 240px;
border: solid coral;
}
Свойство: border-radius
div.container {
border: 3px solid rgb(22, 77, 100);
border-radius: 5px;
}
Чтобы создать границу, которая является идеальным кругом, необходимо установить радиус равным высоте поля или 100%.
div.container {
height: 60px;
width: 60px;
border: 3px solid rgb(22, 77, 100);
border-radius: 100%;
}
Поля: padding
![](https://img.golos.io/proxy/https://s26.postimg.org/x401y88uh/block.jpg)
В CSS можно менять значение данного расстояния с помощью свойства padding.
p.content-header {
border: 3px solid coral;
padding: 10px;
}
Свойство padding позволяет задать величину поля сразу для всех сторон элемента:
- padding-top - отступ сверху;
- padding-right - отступ справа;
- padding-bottom - отступ снизу;
- padding-left - отступ слева.
p.content-header {
border: 3px solid fuschia;
padding-bottom: 10px;
}
Другая реализация свойства padding позволяет точно указать в одном объявлении, сколько и какие отступы должны быть проставлены от каждой стороны содержимого блока.
p.content-header {
border: 3px solid grey;
padding: 6px 11px 4px 9px;
}
Однако, если верхнее и нижнее значения будут равны друг другу, а левое и правое значения также будут равны друг другу, можно использовать следующий синтаксис:
p.content-header {
padding: 5px 10px;
}
Отступы: margin
В CSS можно менять значение данного пространства с помощью свойства margin.
p {
border: 1px solid aquamarine;
margin: 20px;
}
![](https://img.golos.io/proxy/https://s26.postimg.org/8gj29gbt5/New-_Mind-_Map06.1.jpg)
Чтобы быть более конкретными в отношении количества отступов с каждой стороны блока, мы можем использовать следующие свойства:
- margin-top - отступ сверху;
- margin-right - отступ справа;
- margin-bottom - отступ снизу;
- margin-left - отступ слева.
p {
border: 3px solid DarkSlateGrey;
margin-right: 15px;
}
Аналогичная с padding, реализация свойств margin используется для того, чтобы точно указать в одном объявлении, сколько и какие отступы должны быть проставлены от границ блока.
p {
margin: 6px 10px 5px 12px;
}
Если верхнее и нижнее значения будут равны друг другу, а левое и правое значения также будут равны друг другу, можно использовать следующий синтаксис:
p {
margin: 6px 12px;
}
Центрирование
div {
margin: 0 auto;
}
Чтобы центрировать элемент, для него должна быть задана ширина.
Невозможно центрировать элемент, который занимает всю ширину страницы.
div.headline {
width: 400px;
margin: 0 auto;
}
Свертывание отступов
![](https://img.golos.io/proxy/https://s26.postimg.org/lwecnn16x/svert.jpg)
Горизонтальные отступы (слева и справа), всегда отображаются и складываются вместе. Например, если два div с идентификаторами # div-one и # div-two расположены рядом друг с другом, то они будут находиться так далеко друг от друга, каковой является значение суммы их смежных отступов.
#img-one {
margin-right: 20px;
}
#img-two {
margin-left: 20px;
}
В отличие от горизонтальных отступов, вертикальные отступы не складываются. Вместо этого большее значение из двух вертикальных отступов устанавливает расстояние между соседними элементами.
#img-one {
margin-bottom: 30px;
}
#img-two {
margin-top: 20px;
}
Минимальная и максимальная высота и ширина
Чтобы избежать этой проблемы, CSS предлагает два свойства:
- min-width - устанавливает минимальную ширину элемента;
- max-width - устанавливает максимальную ширину элемента.
p {
min-width: 300px;
max-width: 600px;
}
Любой контент, как и текст, может стать трудным для чтения, когда окно браузера сужается или расширяется. Эти два свойства обеспечивают четкость содержания, ограничивая минимальную и максимальную ширину элемента.
Мы также можем ограничить минимальную и максимальную высоту элемента.
- min-height - устанавливает минимальную высоту элемента;
- max-height - устанавливает максимальную высоту элемента.
p {
min-height: 150px;
max-height: 300px;
}
Свойство: overflow
- hidden - отображается только область внутри элемента, остальное будет скрыто;
- scroll - при установке этого значения в поле элемента будет добавлена полоса прокрутки;
- visible - отображается все содержание элемента, даже за пределами установленной высоты и ширины.
p {
overflow: scroll;
}
Сброс настроек по умолчанию
Многие разработчики сбрасывают эти значения по умолчанию, чтобы они могли действительно работать с чистым списком.
* {
margin: 0;
padding: 0;
}
Если значения свойств элементов установлены в 0, то они не требуют единиц измерения.
Видимость: visibility
- hidden - скрывает элемент;
- visible - отображает элемент.
<ul>
<li>Explore</li>
<li>Connect</li>
<li class="future">Donate</li>
<ul>
.future {
visibility: hidden;
}
Подводим итоги
- Блочная модель содержит набор свойств, используемых для создания пространства вокруг и между элементами HTML.
- Высота и ширина области содержимого могут быть заданы в пикселях или в процентах.
- Цвет, стиль и толщина границы могут быть заданы с помощью свойств CSS.
- Поле (padding) - пространство между областью содержимого и границей. Его можно установить в пикселях или процентах.
- Отступ (margin) - пространство от границы текущего элемента до внутренней границы его родительского элемента.
- Значения смежных горизонтальных отступов складываются.
- Вертикальные отступы сворачиваются, поэтому пространство между смежными элементами будет равно большему значению.
- margin: 0 auto - горизонтально центрирует элемент внутри своей родительской области.
- Свойство overflow управляет отображением содержания блочного элемента.
- Свойство visibility может скрывать или показывать элементы.
Свое мнение и личные впечатления
На этом занятии я узнал о четырех свойствах блочной модели: высоте и ширине, границах, полях и отступах. Считаю, что для веб-разработчика, понимание блочной модели является критически важным навыком, а для новичка еще одним шагом на пути к изучению более продвинутых тем HTML и CSS.
Предыдущие части курса Сodecademy - "Learn HTML & CSS"
4.1 Стилизация с помощью CSS (Цвета)
4.2 Стилизация с помощью CSS (Шрифты)
Конспект подготовлен для Академии Голоса @academy.