Для блочных элементов характерны следующие особенности.
Блоки располагаются по вертикали друг под другом.
На прилегающих сторонах элементов действует эффект схлопывания отступов.
Запрещено вставлять блочный элемент внутрь строчного. Например,
Заголовок
не пройдёт валидацию, правильно вложить теги наоборот —
Заголовок
.
По ширине блочные элементы занимают всё допустимое пространство.
Если задана ширина контента (свойство width ), то ширина блока складывается из значений width , полей, границ, отступов слева и справа.
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
Если задана высота контента (свойство height ), то высота блока складывается из значения height , полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align .
Текст по умолчанию выравнивается по левому краю.
Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет как универсальный кирпичик вёрстки. Тег допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь . В примере 3.13 показан фрагмент кода сайта CSS Zen Garden, где активно применяются эти теги для формирования требуемой конструкции.
Пример 3.13. Использование тега
css Zen Garden
The Beauty of CSS Design
CSS - based design. Select any style sheet from the list to load it into this page.
Если в одном блочном элементе содержатся строчные элементы наряду с блочными, то вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя. В примере 3.14 внутри располагается два тега
и рядовой текст. Поскольку этот элемент анонимный, напрямую только к нему одному нельзя применить стили.
Пример 3.14. Анонимный блок
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Первый абзац
Анонимный блок
Второй абзац
Схематично блоки в данном примере показаны на рис. 3.23. Серым цветом выделены блочные теги
, а пунктиром — анонимный блок.
Рис. 3.23. Блоки в документе
Преобразование в блочный элемент
В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height . В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Метод простых итераций
Метод случайных чисел
Метод дихотомии
Метод золотого сечения
Вся строка выступает ссылкой, поэтому при наведении на неё курсора происходит изменение стиля (рис. 3.24).
Рис. 3.24. Ссылка как блочный элемент
Следует понимать, что превращение элемента в блочный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных, даже если через стили они установлены блочными.
Для блочных элементов характерны следующие особенности.
По ширине блочные элементы занимают всё допустимое пространство.
Если элемент располагается непосредственно внутри , то он будет занимать всю ширину веб-страницы. Если один элемент находится внутри другого, то он будет занимать всю ширину своего родителя. В примере 1 показано, как это получается.
Дочь Монтесумы
Они шли, чтобы покорить нас, чтобы пытать нас и сжигать живьем на кострах, они шли, чтобы сделать с нами, вольными англичанами, то же самое, что Кортес сделал с индейцами Анауака.
На рис. 1 показан результат действия примера. Элемент занимает всю ширину веб-страницы, а заголовок и абзац
внутри занимают всю доступную ширину блока.
Ширина блока складывается из значений свойств width, padding, border и margin.
В примере 1 намеренно не указано свойство width , которое определяет ширину содержимого блока. Как только мы добавляем width , то блок уже не будет занимать всё доступное пространство по ширине. При этом ширина самого блока определяется сложением значений margin-left , border-left , padding-left , width , padding-right , border-right , margin-right . Иными словами, ширина содержимого плюс значения свойств padding , border и margin слева и справа (пример 2).
Дочь Монтесумы
Они шли, чтобы покорить нас, чтобы пытать нас и сжигать живьем на кострах, они шли, чтобы сделать с нами, вольными англичанами, то же самое, что Кортес сделал с индейцами Анауака.
В данном примере добавлено свойство width со значением 400px . В итоге, ширина самого блока будет 440 пикселей, поскольку из всего набора свойств у нас есть только width и padding (рис. 2). Не забываем, что к width надо добавлять левый и правый padding .
Рис. 2. Фиксированная ширина блока 440px
Всё это кажется довольно сложным, так что следует помнить, что width — это не ширина блока, а лишь ширина содержимого, а сам блок состоит из его содержимого, отступов, границ и полей. Для упрощения применяется свойство box-sizing, которое меняет алгоритм расчёта ширины. При значении border-box свойство width определяет уже ширину блока, включая padding и border , но не margin (пример 3).
Пример 3. Использование box-sizing
Теперь width устанавливает не ширину содержимого, а ширину блока целиком и она равна 400px (рис. 3).
Рис. 3. Фиксированная ширина блока 400px
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
Для высоты элемента работают те же принципы, что и для ширины, за исключением того, что высота блока зависит от высоты содержимого и меняется динамически, например, при изменении размера шрифта или окна браузера. Если явно установить высоту содержимого через свойство height , то высота блока складывается из height и значений margin , border , padding сверху и снизу (пример 4).
При превышении указанной высоты содержимое отображается поверх блока (рис. 4).
Блоки располагаются по вертикали друг под другом.
Поскольку блочные элементы занимают всё доступное пространство по ширине, то они располагаются друг под другом по вертикали.
На блочные элементы не действуют свойства, предназначенные для строчных элементов.
Ряд стилевых свойств, вроде vertical-align , работает только для строчных элементов и их применение к блочным элементам не даёт никакого видимого результата.
Преобразование в блочный элемент
В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height . В примере 5 показано создание меню, в котором ссылкой является вся доступная по ширине область.
Для превращения ссылки в блочный элемент к селектору a добавляется свойство display со значением block . После этого вся строка выступает ссылкой, поэтому при наведении курсора на строку, даже за пределами текста, происходит изменение стиля ссылки (рис. 5).
Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
Блочные элементы
HTML
p> Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца. p>
CSS
p background-color: #8abb55;>
Использование
Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.
Форматирование по умолчанию
По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором категорий контента. Категория «строчных» элементов примерно соответствует категории текстового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.
Элементы
Ниже приведён полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).
