Основные концепции HTML и CSS: поток, отображение и позиционирование
Мы рассмотрели концепцию DOM-дерева, тегов, групп элементов и структуры блока. В этот раз мы рассмотрим концепцию потока, возможностей отображения элемента, позиционирование элемента на странице.
Flow (поток)
Поток — это порядок (или набор правил) в котором элементы отображаются и располагаются внутри страницы. С потоком связаны несколько свойств, которые влияют на отображение элементов в потоке или вне его.
По умолчанию все элементы на странице располагаются в потоке. За отображение элементов в потоке отвечает свойство display.
Элементы можно «вытащить» из потока и отображать вне потока другим способом. За это отвечает свойство position. По умолчанию, когда элемент находится в потоке, значение свойства position установлено как static.
Свойство display (отображение)
Свойство, которое описывает как отображать элемент. Это свойство влияет на набор других свойств у элемента. Давайте рассмотрим какие бывают значения свойства display.
inline
Как следует из названия, это элементы которые находятся «в строке» и о них можно думать как о «словах» в предложении. Используют для того, что бы не «переводилась строка» и элементы располагались в строчку.
Например, мы не хотим, чтобы ссылка (тег a) внутри параграфа (тег p) была отображена с новой строчки, мы хотим, чтобы она отображалась внутри параграфа текста. По умолчанию ссылка имеет значение свойства display: inline.
Размер инлайн-элементов нельзя задать вручную. инлайны меняют размер от размера контента, который внутри них представлен.
Самый часто используемы элемент, у которого по умолчанию значение свойства display: inline — это span (сокращение от spanning).
block
Благодаря предустановленным стилям браузера, большинство элементов являются блоками. То есть по умолчанию имеют значение свойства display: block.
По умолчанию, находясь в потоке блоки блоки занимают всю ширину родительского элемента (если элемент является дочерним элементу body то он займет ширину окна) и идут один за одним сверху вниз в том же порядке, в котором они появляются в коде HTML.
Блоки используются практически везде. Заголовки, параграфы, списки, элементы списков, цитаты — всё блоки.
Самый часто используемы элемент, у которого по умолчанию значение свойства display: block — это div (сокращение от division).
flex
Флекс — это «резиновый контейнер, внутри которого работают свои законы отображения элементов. Существует отдельный веб-стандарт CSS Flexible Box Layout Module Level 1.
flex-inline
Тоже самое, что и flex, только inline. Смесь двух типов отображения.
grid
Сетка — это тип отображения элемента, когда внутри него создаются колонки и ряды, зоны и прочие абстрактные сущности, по которым можно располагать внутренние элементы.
Существует отдельная спецификация веб-стандарта CSS Grid Layout Module Level 1.
table
Таблица — тип отображения элемента, в котором элемент отображается, как таблица, а внутри него вложенные элементы отображаются, как колонки, ряды и клетки таблицы.
Мы рассмотрели самые часто используемые типы отображения элементов, но существуют другие типа отображения, которые подробно описаны в спецификации веб-стандарта CSS Display Module Level 3.
Свойство position (позиционирование)
Отвечает за позиционирование элементов на странице. Существует несколько способов и техник позиционирования элементов на странице. Рассмотрим все способы позиционирования.
static
Изначальное значение свойства position. Обозначает, что элемент находится и отображается внутри потока. Элементы на странице располагаются в том порядке, в котором вы написали теги HTML.
fixed
Элемент будет расположен вне потока относительно вью порта, положение элемента управляется свойствами top, right, bottom, left.
absolute
Элемент будет расположен вне потока относительно тела страницы (body), либо относительно элемента родителя, положение элемента управляется свойствами top, right, bottom, left.
relative
Элемент будет расположен в потоке, но элементы внутри него будут располагаться относительно этого элемента. Таким образом можно располагать внутри такого элемента другие элементы применяя абсолютное позиционирование. Это очень распространённая техника.
