Блочная структура элементов. Свойство display. Размеры. Урок №5

БЛОЧНЫЕ И СТРОЧНЫЕ ЭЛЕМЕНТЫ

Блочные и строчные элементы
Блочные элементы представляют собой некий условный раздел страницы, занимающий всё пространство по ширине и имеющий возможность включать в себя другие блочные элементы (то есть разделы).
Строчные элементы представляют собой некий условный раздел текста, они встраиваются в текст как отдельное слово и могут включать в себя только строчные элементы.

Теги div и span
div - это простой блочный контейнер
span - это простой строчный контейнер

display
Свойство display меняет способ отображения элементов.
Некоторые возможные значения
block - делает элемент блочным
inline - делает элемент строчным
none - удаляет элемент из потока
inline-block - делает элемент блочно-строчным
Блочно-строчные элементы ведут себя как строчные, но имеют размеры.

Размеры элементов
За размеры элементов отвечают свойства width, max-width, min-width, height, max-height, min-height
width - ширина, height - высота
max-width, max-height - максимально возможная ширина/высота элемента
min-width, min-height - минимально возможная ширина/высота элемента

overflow
Свойство, которое срабатывает при переполнении элемента содержимым, то есть когда указанные ширина и высота не вмещают содержимое.
hidden - содержимое, выходящее за пределы, скроется
scroll - добавятся полосы прокрутки
visible - содержимое, выходящее за пределы, останется видимым
auto - автоматический режим
Помимо свойства overflow, есть ещё и overflow-x и overflow-y, отвечающие за переполнение по горизонтали и вертикали соответственно.

Padding-border-margin

padding
Внутренние отступы элемента, поля. Расстояние от границы элемента до его содержимого.
Можно задать до 4 значений padding, которые будут по очереди верхним, правым, нижним и левым отступом.
ПРАВИЛО: Начиная сверху по часовой стрелке.
Если какое-то значение отсутствует, то значение берется из противоположной стороны.
Также существуют свойства для отдельных сторон.

padding-top
padding-left
padding-right
padding-bottom
padding

margin
Расстояние от границы элемента до другого элемента или края страницы.
Задаётся аналогично padding, до 4-ых значений, также есть значения для 4-ех сторон: margin-top, margin-left, margin-right, margin-bottom.
ВАЖНО! У двух стоящих друг над другом элементов margin-top нижнего и margin-bottom верхнего эти значения не складываются, а схлопываются! То есть, расстояние между двумя этими элементами будет равно большему из margin.
Если для блочного элемента прописать левый и правый margin в значении auto, то элемент станет по центру.

border
Граница элемента
border: border-style | border-width | border-color
border-width - ширина границы
border-color - цвет границы
border-style - минимальное необходимое значение для задания границы. Тип границы.

border-style

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

Способ изменения размеров
box-sizing: border-box
border-box - Свойства width и height включают в себя значения полей и границ, но не отступов (margin).

Задание (чуть-чуть творческое)
Используя все знания, сформировать карточки уроков.
Например: