Блочные и строчные элементы

В языке 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 документа.

 

Заказать сайт

    ×
    Заказать сайт для учебы

      ×