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

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

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

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

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

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

Границы

• width - толщина границы, может быть задана в пикселях или с одним из следующих ключевых параметров: thin (тонкая), medium (средняя), или thick (толстая).

• style - стиль границы. Веб-браузеры могут отображать любой из 10 разных стилей, среди которых: none (без стиля), dotted (пунктирная) и solid (сплошная).

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

p {
 border: 3px solid coral;
}

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

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

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

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

Поля: padding

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

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

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

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

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

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

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

Отступы: 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;
}

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

p {
 margin: 6px 12px;
}

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

div {
 margin: 0 auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

Предыдущие части курса Сodecademy - "Learn HTML & CSS"

1. Основы HTML

2. HTML-контент

3. Основы CSS

4.1 Стилизация с помощью CSS (Цвета)

4.2 Стилизация с помощью CSS (Шрифты)

5. Организация HTML & CSS

Конспект подготовлен для Академии Голоса @academy.