Блочные элементы
Блочным называется элемент, который занимает всю доступную ширину и всегда начинается с новой строки. У элементов с таким поведением в стилях свойство display задано как block, list-item, table и в некоторых случаях run-in. В HTML есть ряд элементов, у которых эти значения display установлены по умолчанию, поэтому они уже наделены свойствами блочных элементов. В частности, это <address>, <blockquote>, <h1>…<h6>, <p>, <ol>, <ul>, <section>, <div> и др.
Особенности блочных элементов
Для блочных элементов характерны следующие особенности.
По ширине блочные элементы занимают всё допустимое пространство.
Если элемент располагается непосредственно внутри <body>, то он будет занимать всю ширину веб-страницы. Если один элемент находится внутри другого, то он будет занимать всю ширину своего родителя. В примере 1 показано, как это получается.
Пример 1. Ширина блоков
На рис. 1 показан результат действия примера. Элемент <section> занимает всю ширину веб-страницы, а заголовок <h2> и абзац <p> внутри <section> занимают всю доступную ширину блока.
Рис. 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).
Пример 2. Ширина блока
В данном примере добавлено свойство width со значением 400px. В итоге, ширина самого блока будет 440 пикселей, поскольку из всего набора свойств у нас есть только width и padding (рис. 2). Не забываем, что к width надо добавлять левый и правый padding.
Рис. 2. Фиксированная ширина блока 440px
Всё это кажется довольно сложным, так что следует помнить, что width — это не ширина блока, а лишь ширина содержимого, а сам блок состоит из его содержимого, отступов, границ и полей. Для упрощения применяется свойство box-sizing, которое меняет алгоритм расчёта ширины. При значении border-box свойство width определяет уже ширину блока, включая padding и border, но не margin (пример 3).
Пример 3. Использование box-sizing
section {
background: #F5E8D0; /* Цвет фона */
box-sizing: border-box; /* Алгоритм расчёта ширины */
width: 400px; /* Ширина блока */
border: 1px solid #333; /* Рамка */
padding: 20px; /* Поля */
}
Теперь width устанавливает не ширину содержимого, а ширину блока целиком и она равна 400px (рис. 3).
Рис. 3. Фиксированная ширина блока 400px
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
Для высоты элемента работают те же принципы, что и для ширины, за исключением того, что высота блока зависит от высоты содержимого и меняется динамически, например, при изменении размера шрифта или окна браузера. Если явно установить высоту содержимого через свойство height, то высота блока складывается из height и значений margin, border, padding сверху и снизу (пример 4).
Пример 4. Высота блока
При превышении указанной высоты содержимое отображается поверх блока (рис. 4).
Рис. 4. Высота блока
Блоки располагаются по вертикали друг под другом.
Поскольку блочные элементы занимают всё доступное пространство по ширине, то они располагаются друг под другом по вертикали.
На блочные элементы не действуют свойства, предназначенные для строчных элементов.
Ряд стилевых свойств, вроде vertical-align, работает только для строчных элементов и их применение к блочным элементам не даёт никакого видимого результата.
Преобразование в блочный элемент
В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height. В примере 5 показано создание меню, в котором ссылкой является вся доступная по ширине область.
Пример 5. Меню
Для превращения ссылки в блочный элемент к селектору a добавляется свойство display со значением block. После этого вся строка выступает ссылкой, поэтому при наведении курсора на строку, даже за пределами текста, происходит изменение стиля ссылки (рис. 5).
Рис. 5. Ссылка как блочный элемент
См. также
- border
- display
- display в CSS
- height
- margin
- margin в CSS
- padding
- vertical-align
- width
- Абсолютное позиционирование
- Верхний и нижний индекс
- Выравнивание картинок
- Выравнивание с помощью флексбоксов
- Высота и ширина в CSS
- Добавление треугольника
- Использование в вёрстке
- Колесо для сокращённых свойств
- Описание float
- Отзывчивый веб-дизайн
- Открываем блочную модель
- Повёрнутые рамки
- Поток
- Примеры использования float
- Размеры блока
- Рамка вокруг изображений
- Свойства текста в CSS
- Свойство border
- Свойство margin
- Создание флексбоксов
- Спойлер
- Строчно-блочные элементы
- Строчные элементы
- Схлопывающиеся margin
Создайте веб-страницу, показанную на рис. 1.
Рис. 1
Создайте веб-страницу, показанную на рис. 1. Вся строка в списке является ссылкой и меняет свой вид при наведении на неё курсора.
Рис. 1