FLOW
В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Элемент, размещенный в самом верху кода, отобразится раньше элемента, который расположен в коде ниже.
Типы элементов
BLock
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>,<div>, <fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие.
Особенности:
- Блоки располагаются по вертикали друг под другом.
- На прилегающих сторонах элементов действует эффект схлопывания отступов.
- Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1>Заголовок</h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a>Заголовок</a></h1>.
- По ширине блочные элементы занимают всё допустимое пространство.
- Если задана ширина контента (свойство width), то ширина блока складывается из значений width, padding, border, margin слева и справа.
-
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
- Если задана высота контента (свойство height), то высота блока складывается из значения height, padding, border, margin сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
- На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
- Текст по умолчанию выравнивается по левому краю.
INLINE
Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др., а также элементы, у которых свойство display установлено как inline. В основном они используются для изменения вида текста или его логического выделения.
Особенности:
-
Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
-
Эффект схлопывания отступов не действует.
-
Свойства, связанные с размерами (width, height) не применимы.
-
Ширина равна содержимому плюс значения padding, margin и border.
-
Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
-
Можно выравнивать по вертикали с помощью свойства vertical-align.
Inline-block
В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block.
особенности:
-
Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
-
Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
-
Ширина равна содержимому плюс значения padding, margin и border.
-
Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
-
Можно выравнивать по вертикали с помощью свойства vertical-align.
-
Разрешено задавать ширину и высоту.
-
Эффект схлопывания отступов не действует.
PositioN
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position, изменяется и система координат.
Absolute
Fixed
То же самое что и absolute, только позиционирование элемента происходит относительно окна браузера, а не документа.
Relative
FLOW
By Serejka Simanovich
