Поток
HTML документ представляет собой живой документ.
Даже без какого-либо применения CSS, HTML-документ уже содержит свои собственные правила:
- изменчивость: как содержимое адаптируется к размерам браузера;
- очерёдность: порядок, в котором появляются элементы;
- наложение: как элементы появляются друг над другом.
Это естественное поведение является логичным.
Изменчивость
В HTML содержимое — это король.
Все блочные элементы являются гибкими. Они естественным образом адаптируют свою компоновку, чтобы приспособить внутреннее содержимое:
- width: 100%
Блок будет занимать всю доступную ширину. - Перенос слов
Если встроенное содержимое в блоке не помещается на одной строке, оно будет продолжено на новой строке. - height: auto
Высота блока изменяется автоматически, чтобы она соответствовала размеру его содержимого.
- Блочный элемент по умолчанию занимает полную ширину.
- Значение height равно высоте его содержимого.
Очерёдность
Элементы HTML отображаются в том порядке, в котором они записаны в коде. Первый в коде — первый в браузере.
Каждый блок появляется в том порядке, в котором он появляется в коде HTML, сверху вниз.
<p>Первый</p>
<p>Второй</p>
<p>Третий</p>
<p>Четвёртый</p>
<p>Пятый</p>
Наложение
У браузера есть три измерения.
Каждый элемент HTML принадлежит воображаемому слою.
Порядок наложения зависит от того, как элементы вложены друг в друга: дочерние элементы появляются поверх своих родителей.
- Каждый вложенный элемент появляется поверх своего родителя.
- Чем глубже он по иерархии, тем выше в наложении.
<div>
Этот родитель позади
<p>
Этот вложенный дочерний элемент появляется <strong>поверх</strong> своего родителя
</p>
</div>
Нарушение потока
Хотя поведение браузера по умолчанию является эффективным, этого бывает недостаточно для нужд вашего дизайна.
Некоторые свойства CSS позволяют нарушить поток:
- height и width могут поменять изменчивость элемента;
- float нарушает поведение элемента, а также его окружения;
- значения absolute и fixed у свойства position удаляют элемент из потока;
- z-index может менять порядок наложения элементов.
См. также
- float
- float в CSS
- height
- position
- position в CSS
- relative и absolute
- width
- z-index
- Абсолютное позиционирование
- Блочные элементы
- Буквица
- Влияние float
- Выравнивание картинок
- Высота и ширина в CSS
- Добавление тени
- Использование в вёрстке
- Липкое позиционирование
- Нормальное позиционирование
- Описание float
- Открываем блочную модель
- Относительное позиционирование
- Подробнее о позиционировании
- Примеры использования float
- Размеры блока
- Свойства позиционирования
- Создание флексбоксов
- Строчные элементы
- Фиксированное позиционирование