В языке HTML выделяют две основные категории элементов. данные категории соответствуют типам их содержимого и поведению в структуре веб-страницы. Это блочные и строчные элементы. Блочные элементы используются для создания структуры страницы. Строчные же используются для форматирования текстовых фрагментов веб-страницы.
Весь HTML документ организован в виде дерева элементов. В то же время модель CSS представляет собой алгоритм, обрабатывающий HTML документ. Каждый блок в дереве — это соответствующий элемент или псевдоэлемент.
Каскадирование и наследование в CSS используется для создания дерева блоков. Они позволяют назначить значение для каждого css-свойства каждому элементу в исходном дереве.
Факторы определяющие положение блоков на странице:
- размер элемента;
- тип элемента (строчный или блочный);
- отношение между элементами DOM;
- схема позиционирования;
- внешняя информация (размер окна браузера);
- размер внутренних изображений.
Блочные элементы и контейнеры
Блочные элементы — это элементы высшего уровня. Они форматируются визуально как блоки. Располагаются такие элементы на странице в окне браузера вертикально. Свойство display со значениями block, list-item, table делают элемент блочным.
Список блочных элементов:<address>, <article>, <aside>,
<blockquote>,
<dd>, <div>, <dl>, <dt>, <details>,
<fieldset>, <figcaption>, <figure>, <footer>, <form>,
<h1>-<h6>, <header>, <hr>,
<li>, <legend>,
<nav>, <noscript>,
<ol>, <output>, <optgroup>, <option>,
<p>, <pre>,
<section>, <summary>,
<table>,
<ul>
Размещаться блочные элементы могут непосредственно внутри элемента body. Все блочные элементы создают разрыв строки перед элементом и после него. При этом они образуют прямоугольную область, которая занимает всю ширину экрана или блока родителя.
Строчные элементы и строчные контейнеры
Строчные элементы создают внутристрочные контейнеры. Они не формируют новые блоки контента. Свойство display со значениями inline, inline-table делают элемент строчным.
Список строчных элементов:<a>, <area>,
<b>, <bdo>, <bdi>,
<cite>, <code>,
<dfn>, <del>,
<em>,
<i>, <iframe>, <img>, <ins>,
<kbd>,
<label>,
<map>, <mark>,
<s>, <samp>, <small>, <span>, <strong>, <sub>, <sup>,
<time>,
<q>,
<ruby>,
<u>,
<var>
Строчные элементы могут содержать только данные и други строчные элементы. Однако исключение составляет элемент <a> который может содержать внутри себя целые абзаы, списки, таблицы и т.д. но при условии что они не содержат другие интерактивные элементы типа ссылок и кнопок.
Строчно-блочные элементы
Такой тип элементов браузер обрабатывает как строчно-блочные (display: inline-block;). В основном такие элементы считаются строчными, но им можно задавать поля, отступы, ширину и высоту.
Список строчно-блочных элементов:<audio>,
<button>,
<canvas>,
<embed>,
<input>,
<keygen>,
<meter>,
<object>,
<progress>,
<select>,
<textarea>,
<video>
Блочные и строчные элементы это основа всего HTML документа, без них применение стилей форматирование не возможно. Для грамотной реализации и применения стилей необходимо точно знать какие элементы являются блочными а какие строчными. От этого зависит последующее форматирование HTML документа.