Особенности строчно-блочных элементов в CSS
Существуют теги, которые при отображении на экране являются . Строчно-блочные элементы сочетают особенности блочных и строчных элементов.
Вы пока знаете только один такой тег: img . Картинки, однако, не раскрывают все особенности этой модели, поэтому работу таких элементов посмотрим на примере тегов span , сменив им блочную модель, задав свойству display значение inline-block .
Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry
Строчно-блочные элементы
Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.
Рис. 3.28. Галерея фотографий
Если для формирования секций использовать тег , как блочный элемент он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задать цвет фона всей секции и установить её размеры. Наиболее популярное решение в подобных случаях это использование свойства float , которое будет рассмотрено в следующем разделе. Пока же остановлюсь на строчно-блочных элементах, которые сочетают преимущества строчных и блочных элементов.
В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block .
Характеристики этих элементов следующие.
- Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
- Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
- Ширина равна содержимому плюс значения отступов, полей и границ.
- Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Можно выравнивать по вертикали с помощью свойства vertical-align .
- Разрешено задавать ширину и высоту.
- Эффект схлопывания отступов не действует.
Чтобы создать галерею, представленную на рис. 3.28 для тега следует задать значение display как inline-block , а внутрь него добавить изображение и подпись через тег
(пример 3.18).
Пример 3.18. Использование display
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Галерея
Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).
Рис. 3.29. Разная высота секций
Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align , добавив это свойство к классу photo . Если указать значение top , то поменяется отображение секций (рис. 3.30).
Рис. 3.30. Выравнивание по верхнему краю
Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout . Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).
Пример 3.19. Стиль для IE
Также строчно-блочные элементы удобно использовать для различных каталогов товаров, которые встречаются в интернет-магазинах. Обычно они выводятся с картинкой и подписью к ней. Всё это похоже на галерею, сделанную выше, поэтому остаётся только модифицировать её код, учесть выравнивание по высоте и поведение IE (пример 3.20).
Пример 3.20. Каталог товаров
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Каталог 
Видео 1856
Фото 315
Мобильные устройства 2109
Компьютеры и орг.техника 4296
Бытовая техника 731
Результат данного примера показан на рис. 3.31.
Рис. 3.31. Каталог товаров
Чтобы не задавать каждому тегу , которых может быть довольно много, свой класс, в примере введён с идентификатором catalog и стиль применяется к тегам внутри него.
Блочные элементы
Для блочных элементов характерны следующие особенности.
По ширине блочные элементы занимают всё допустимое пространство.
Если элемент располагается непосредственно внутри , то он будет занимать всю ширину веб-страницы. Если один элемент находится внутри другого, то он будет занимать всю ширину своего родителя. В примере 1 показано, как это получается.
Пример 1. Ширина блоков
Ширина
Дочь Монтесумы
Они шли, чтобы покорить нас, чтобы пытать нас и сжигать живьем на кострах, они шли, чтобы сделать с нами, вольными англичанами, то же самое, что Кортес сделал с индейцами Анауака.
На рис. 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).
Пример 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 показано создание меню, в котором ссылкой является вся доступная по ширине область.
Для превращения ссылки в блочный элемент к селектору a добавляется свойство display со значением block . После этого вся строка выступает ссылкой, поэтому при наведении курсора на строку, даже за пределами текста, происходит изменение стиля ссылки (рис. 5).
Рис. 5. Ссылка как блочный элемент
Блочные элементы
Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
Блочные элементы
HTML
p> Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца. p>
CSS
p background-color: #8abb55; >
Использование
- Блочные элементы могут отображаться только внутри элемента и его потомков.
Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.
По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором категорий контента. Категория «строчных» элементов примерно соответствует категории текстового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.
Элементы
Ниже приведён полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).
Длинная («блочная») цитата.
Раскрывающийся блок с подробностями.
