что такое блочный элемент html

Блочные элементы

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры

Пример 1. Использование блочных элементов

В данном примере абзац (тег

) вставляется внутрь контейнера

. Кстати, ошибкой будет поступить наоборот — добавить

в контейнер (

Ut wisi

Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними. К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.

Ширина блочных элементов

По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег

Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока ( width ), отступов ( margin ), полей ( padding ) и границ ( border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.

Пример 2. Ширина слоя

В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.

Рис 1. Ширина блочного элемента

Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.

Пример 3. Ширина слоя в процентах

Результат примера показан на рис. 2.

Рис. 2. Отображение ширины слоев в браузере

Ширина первого слоя в данном примере ( layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя ( layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег

Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.

Высота

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).

Пример 4. Высота слоя

Результат данного примера продемонстрирован на рис. 3.

Рис. 3. Высота блока в разных браузерах

Видно, что браузер оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.

Цвет фона

Рис. 4. Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.

а. Internet Explorer 7

б. Firefox, Internet Explorer 8+

Рис. 5. Отображение рамки в браузерах

В примере 5 показано, как создать код для получения подобной границы.

Пример 5. Пунктирная рамка

Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.

Резюме

Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.

Источник

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

HTML-элементы, как правило, делятся на блочные и строчные.

Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 это двоичное различие заменено более сложным набором категорий контента. Категория «блоков» примерно соответствует категории основного потока в HTML5, а «строчные» элементы аналогичны текстовому контенту. Кроме того, есть и другие категории.

Блочные элементы

Список блочных элементов

Ниже приведен полный список всех блочных элементов (несмотря на то, что понятие «блочный» технически не относится к новым элементам в HTML5). Как вы можете увидеть, их не так уж и много.

Длинная цитата. HTML5 Полотно (холст). Описание определения.

Внешние, внутренние отступы и рамка элемента не являются обязательными, по умолчанию их значение равно нулю. Тем не менее, некоторые браузеры добавляют этим свойствам положительные значения по умолчанию на основе своих таблиц стилей. Очистить стили браузеров для всех элементов можно при помощи универсального селектора:

Элемент

Это своего рода универсальное средство построение разметки страницы. Но не стоит им злоупотреблять.

Реальный пример кода

Схлопывание вертикальных отступов

Соприкасающиеся вертикальные отступы margin объединяются. При этом ширина общего отступа равна ширине большего из исходных отступов.

Схлопывание отступов

Слияние выполняется только для блочных элементов в нормальном потоке документа. Внешние вертикальные отступы строчных, плавающих и абсолютно позиционированных элементов не сливаются.

Если среди схлопывающихся отступов есть отрицательные значения, то браузер добавит отрицательное значение к положительному, а полученный результат и будет расстоянием между элементами.

Выподание вертикальных отступов

Строчные элементы

Список строчных элеметов

Отличие от блочных элементов

Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы.По умолчанию, встроенные элементы не начинаются с новой строки, они располагаются друг за другом в одной строке, при необходимости строка переносится.

Ширина и высота строчного элемента зависит только от его содержимого, задать размеры с помощью CSS нельзя. Можно увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.

Для того чтобы верхние и нижние поля и отступы работали для строчного элемента, нужно использовать конструкцию . Элемент останется встроенным, но к нему можно будет полноценно применить поля, отступы, задать ширину и высоту.

Строчные элементы предназначены для оформления текста на уровне небольших фраз и отдельных слов. Блочные же элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.

Преобразование в блочный/строчный элемент

В некоторых случаях, например, требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height (тем самым получим подобие своего «button»).

Строчно-блочные элементы

Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные . Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.

Поведение блочных, строчных и строчно-блочные

Ниже представлен наглядный пример использования свойства

Список блочно-строчно-блочных элементов

HTML5 Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript. Создает выпадающий список.

Создает многострочное текстовое поле. HTML5 Видеоплеер.

Источник

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

Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ).

Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором категорий контента, согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.

Модель визуального форматирования CSS в деталях

1. Модель визуального форматирования

HTML-документ организован в виде дерева элементов и текстовых узлов. Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства.

Каждый блок в дереве представляет соответствующий элемент или псевдоэлемент, а текст (буквы, цифры, пробелы), находящийся между открывающим и закрывающим тегами, представляет содержимое текстовых узлов.

Чтобы создать дерево блоков, CSS сначала использует каскадирование и наследование, позволяющие назначить вычисленное значение для каждого css-свойства каждому элементу и текстовому узлу в исходном дереве.

Положение блоков на странице определяется следующими факторами:

2. Блочные элементы и блочные контейнеры

6. Минимальная и максимальная ширина: свойства min-width и max-width

Свойства не наследуются.

7. Высота содержимого: свойство height

Свойство height определяет высоту содержимого блока. Это свойство не применяется к незамещаемым строчным элементам. Значения длины не могут быть отрицательными.

Свойство не наследуется.

8. Минимальная и максимальная высота: свойства min-height и max-height

Иногда полезно ограничить высоту элементов определенным диапазоном. Свойства min-height и max-height предлагают эту функциональность.

Свойства не наследуются.

9. Расчет высоты строки: свойства line-height и vertical-align

Как описано выше, пользовательские агенты (браузеры) передают блоки встроенного уровня в вертикальный стек линейных блоков. Высота линейного блока определяется следующим образом:

Высота линейного блока — это расстояние между самой верхней и самой нижней частью блока. Пустые встроенные элементы генерируют пустые встроенные блоки, но эти блоки по-прежнему имеют поля, отступы, границы, высоту строки и, таким образом, влияют на эти вычисления также, как и элементы с содержимым.

В элементе уровня блока, содержимое которого состоит из элементов встроенного уровня, свойство line-height определяет минимальную высоту линейных блоков внутри элемента. Минимальная высота состоит из минимальной высоты над базовой линией и минимальной глубины под ней.

Для элементов уровня строки свойство line-height указывает высоту, которая используется при расчете высоты линейного блока.

Отрицательные значения не допустимы.

Рис. 4. Контейнер строки

Свойство не наследуется.

Рис. 5. Свойство vertical-align

10. Изменение блочной модели: свойство box-sizing

Свойство не наследуется.

Источник

Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.

Дефолтные стили браузера и их нормализация

Т.е., если в браузере открыть HTML документ без привязанного к нему CSS кода, то он уже будет каким-то образом оформлен. Это базовое оформление задаётся с использованием стилей браузера.

Но в разных браузерах дефолтные стили могут быть различными.

Например, одном в браузере некоторый элемент может иметь одно оформление, а в другом другое.

Это не хорошая ситуация, т.к. в большинстве случаев желательно чтобы сайт или веб-приложение отображалось в разных браузерах одинаково, или очень близко к этому.

Для того чтобы нормализовать стили, которые отличаются в разных браузерах можно использовать Normalize.css.

После подключения этого файла все элементы в HTML документе будут отображаться более согласовано и в соответствии со современными стандартами.

Строчные и блочные элементы

Элементы HTML обычно являются строчными или блочными. Но это разделение существовало в HTML4. В HTML5 был предложен новый подход. В этом новом подходе применение того или иного HTML элемента должно определяться на основе контента, который он должен содержать. Для этого в HTML5 были введены категории контента, и описано какой элемент и к каким категориям может относится.

Строчные элементы (inline)

Строчные элементы – это элементы, которые являются частью строки и занимают такое количество пространства, которое необходимо для отображения их содержимого.

Строчным элементам нельзя установить размеры ( width и height ), задать верхние и нижние margin отступы.

Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.

Для строчного элемента, размещенного на нескольких строках padding, margin и border обычно не используют, т.к. они в этом случае бесполезны.

Строчные элементы обычно используются для выполнения некоторых действий над текстом, например: перенос строки, выделения фрагмента текста курсивом, логического выделения некоторого текста и применения к нему стилей с помощью CSS и т.д. В зависимости от назначения строчного элемента фрагмент текста помещают между открывающим и закрывающим тегом или применяют тег в любом месте текста, например для переноса строки.

Например:
Можно использовать строчный элемент чтобы выделить текст, привлекающий внимание посетителей сайта с помощью жирного начертания.

Блочные элементы (block)

Блочные элементы могут содержать строчные элементы и другие блочные элементы, для которых их родитель будет являться контейнером. Блочные элементы предназначены для разработки каркаса веб-страницы, разметки больших блоков текста и много другого.

Внутри этого блочного элемента помещён строчный элемент.

Источник

Блочная модель

Рис. 3.1. Свойства, формирующие блочный элемент

Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.

Полем будем называть расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока. Из-за того, что значения полей могут различаться на каждой стороне, применяют выражения «верхнее поле» или «поле сверху», и им подобные для других сторон. Обозначение «поля» следует понимать как одинаковое значение полей для всех сторон. Основное предназначение полей — создать пустое пространство вокруг содержимого блочного элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование полей повышает читабельность текста и улучшает внешний вид страницы. В примере 3.1 показано использование полей для оформления текста.

Пример 3.1.Использование свойства padding

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 3.3.

Рис. 3.3. Поля вокруг текста

Значения полей не могут быть отрицательными.

Границы

Пример 3.2. Красная пунктирная линия

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.4.

Рис. 3.4. Линия возле текста

Отступы

Отступом будем называть пустое пространство от внешнего края границы, полей или содержимого блока. Как уже упоминалось, границы с полями не обязательны и могут отсутствовать, так что способ формирования отступов зависит от ситуации. Как и в случае с полями, применяют выражения «верхний отступ» или «отступ сверху», и им подобные для других сторон. Обозначение «отступы» следует понимать как одинаковое значение отступов для всех сторон.

Для отступов характерны следующие особенности.

В примере 3.3 показано схлопывание отступов и их прозрачность.

Пример 3.3. Использование отступов

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.

Рис. 3.5. Отступы в элементе

Ширина блока

Ширина блока это комплексная величина и складывается из нескольких значений свойств:

Как уже упоминалось, какие-то свойства могут отсутствовать и в этом случае на ширину не оказывают влияние. Общая ширина показана на рис. 3.6 в виде чёрной пунктирной линии.

Рис. 3.6. Ширина блока

Допустим, для слоя написан следующий стиль.

Ширина блока согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся (в CSS3 так суммировать можно, только поддерживается эта возможность далеко не всеми браузерами). В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два — поменять алгоритм блочной модели и воспользоваться вложенными слоями.

Алгоритм блочной модели

Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства одновременно (пример 3.4).

Пример 3.4. Ширина блока

XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx

Вложенные слои

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая — для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное — поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 3.5 показано использование вложенных слоев.

Пример 3.5. Вложенные слои

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.7.

Рис. 3.7. Ширина блока в процентах

Преимуществом вложенных слоев является использование отступов ( box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить добавление дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.

Высота блока

Рис. 3.8. Высота блока

Пример 3.6. Высота блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.9.

Рис. 3.9. Высота блока в процентах

С высотой связана ещё одна особенность — при превышении содержимого блока его размеров при заданной высоте, содержимое начинается отображаться поверх блока (рис. 3.10).

Рис. 3.10. Превышение размеров блока

Код, приводящий к подобному результату, приведен в примере 3.7.

Пример 3.7. Превышение размеров блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Рис. 11. Использование свойства overflow

Если задать одновременно цвет фона и пунктирную границу блока, то становится заметно, что граница проходит внутри цветной области. Правда в разных браузерах наблюдается разночтение, в частности Internet Explorer до версии 7.0 включительно содержит ошибку, при которой фон выводится по внутреннему краю границы (рис. 12в). Начиная с версии 8.0 эта ошибка исправлена, и фон выводится по стандартам (рис. 12г). Браузеры Opera (рис. 12а), Firefox (12б), Safari и Chrome (рис. 12д) фон выводят правильно. Небольшие различия наблюдаются при отображении пунктирной рамки, но они не влияют на блочную модель.

Рис. 12. Отображение фона в браузере

В примере 3.8 показано, как создать код для получения подобной границы.

Пример 3.8. Фон и граница

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид блока в браузерах будет практически одинаковым.

Источник