Блочные элементы

Элементы HTML страницы обычно делятся на блочные и строчные.

Блочные элементы можно представлять как прямоугольные области на странице. Они имеют следующие особенности:

1. До и после блочного элемента существует перенос строки.
2. Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.
3. Занимают всё доступное пространство по горизонтали.

К блочным элементам относятся такие теги как:<p>,<h1>,<h2>,<ul>и так далее.

Еще один важный блочный тег — это тег<div>, который обозначает просто «блок» или «прямоугольный контейнер». Этот тег чаще всего используется для создания сеток.

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

Стандартная блочная модель

Стандартная блочная модель отвечает на основной вопрос:

Сколько же в итоге места будет занимать элемент?

Ответ следующий:

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

Для строчных элементов есть свои особенности, которые мы опишем позже.

Схема блочной модели:

• ширина/высота содержания — свойстваwidthиheight(синий прямоугольник на схеме);
• внутренние отступы — свойствоpadding;
• рамки — свойствоborder;
• внешние отступы — свойствоmargin.

Строчные элементы

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

1. До и после строчного элемента отсутствуют переносы строки.
2. Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
3. Можно задавать только горизонтальные отступы.

К строчным элементам относятся такие теги как:<a>,<strong>,<em>,<span>и так далее.

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

display: table

Дальнейшие несколько заданий будут посвящены табличным типам элементов.

Табличные сетки были очень популярны на заре веба. Действительно, у табличных сеток есть преимущества, которые очень сложно получить с помощью блоков. Например, столбцы одинаковой высоты.

Однако, семантически таблицы не предназначены для разметки сеток и постепенно от них отказались. Но память об их удобстве жила.

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

Первое значение —display:tableзадает элементу типтаблица. Особенности табличных элементов:

1. можно задавать ширину, высоту, рамки, отступы;
2. по умолчанию ширина зависит от содержания;
3. переносы строки до и после элемента.

Табличные элементы похожи на блочные за исключением ширины по умолчанию.

display: table-row

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

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

<table> —display:table;

<tr> —display:table-row;

<td> —display:table-cell;

В этом задании вы создадите строки таблицы с помощьюdisplay:table-row;. Строка — необычный элемент. Она является контейнером для ячеек и практически не имеет собственного отображения. Для нее можно только задавать цвет фона.

display: table-cell[21/23]

С помощью значенияtable-cellсвойстваdisplayможно задать элементу типячейка таблицы. Конечно, лучше чтобы элементы-ячейки находились внутри элементов-строк, которые находятся внутри элементов-таблиц.

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

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

• width
• height
• margin
• padding
• border

Width - это ширина содержимого!

Height - это высота содержимого! (Не стоит использовать % - не всегда работает так как задумывалось.)

Советы:

1. Старайтесь не использовать одновременно width и height, если это не декоративный элемент с фиксированным размерами
2. Старайтесь не задавать фиксированную высоту (опасность что внутренний контент выйдет за рамки)
3. Если всё-таки нужна высота, то лучше использовать min-height

Padding - внутренний отступ. Если задавать в % - рассчитывается от размеров родительского элемента.

Margin - это внешний отступ.

Border - может показаться что это декоративное свойство, но оно влияет на размер элемента!

Расчёт полного размера элемента

• Общая ширина и высота элемента, это не то же самое, что и свойства width и height, а обычно больше.
• Но! это поведение можно изменить (box-sizing)

Тонкости блочной модели

• Схлопывание внешних отступов (margin)
• Выпадание внешних отступов (margin)
• Как расположить элемент по центру
• Ширина по умолчанию и 100%
• box-sizing

Схлопывание внешних отступов - только в вертикальном направлении - берется max-margin, а не сумма

Выпадание внешних отступов - в вертикальном направлении внешний отступ (margin) вложенного блока может выпадать из родительского и отталкивать оба блока.

Как бороться с выпаданием?

• overflow: hidden - использовать с осторожностью
• padding-top: 1px - margin дочернего элемента не пробьется через родительский padding
• border-top: 1px solid transparent - аналогично верхнему примеру

Как расположить элемент по центру

• margin: auto - работает только в горизонтальном направлении (но для inline-block не работает), в вертикальном только при использовании flexbox

Ширина/высота по умолчанию или 100%

100% - это ширина/высота родительского блока, а не ширина/высота свободного пространства в родительском блоке!Чтобы бороться с этим -box-sizing

По default используется content-box - когда width только размер контента, а border-box width это весь размер.