в коде документа присутствует
один, то он занимает всю свободную ширину окна браузера и ширина блока будет
равна 100%. Стоит поместить один тег
внутрь
другого, как ширина внутреннего тега начинает исчисляться относительно его родителя,
т.е. внешнего контейнера.
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации
CSS четко указано, что ширина складывается из суммы следующих параметров: ширины
самого блока (width
), отступов (margin
),
полей (padding
) и границ (border
).
В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
Ширина
Lorem ipsum dolor sit amet...
В результате данного примера получим слой шириной 342 пиксела. На рис. 1
показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда
в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width
.
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается
как auto
, это позволяет вписывать слой в окно браузера,
не принимая в расчет значения установленных полей. Если изменить ширину на 100%,
то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано
создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Ширина
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1
)
установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя
(layer2
) ширина также задана 100%, но поля определяются
для внутреннего абзаца (тег
). За счет
этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3
)
вообще не применяется свойство width
, поэтому оно
определяется по умолчанию — auto
. В таком
случае слой будет занимать всю ширину окна браузера без всяких горизонтальных
полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика,
но в любом случае нужно учитывать особенности блочных элементов и создавать
универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height
и добавляет к нему еще значение margin
,
padding
и border
.
Если высота слоя не установлена явно, то она вычисляется автоматически исходя
из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно
превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Высота
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Результат данного примера продемонстрирован на рис. 3.
Рис. 3. Высота блока в разных браузерах
Видно, что браузер оставляет высоту неизменной,
за счет чего текст не помещается в блоке и накладывается поверх слоя.
Цвет фона
Цвет фона элемента проще всего устанавливать через универсальное свойство background
.
Фоном при этом заливается область, которая определяется значениями
width
, height
и padding
(рис. 4).
Рис. 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. Пунктирная рамка
Рамка
Lorem ipsum dolor sit amet...
Различия в подходе браузеров при рисовании границ заметны только на цветном
фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически
одинаковым.
Резюме
Блочные элементы выступают в качестве основного строительного материала при
верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с
новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только
значениями height
и width
,
но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане
делятся на две части: одни поддерживают в этом вопросе спецификацию, другие
же ее игнорируют и поступают по-своему. Это создает трудности разработчикам,
которые желают делать универсальные веб-страницы. Можно только посоветовать
ограниченно использовать свойства width
и height
,
поскольку по умолчанию браузер применяет аргумент auto
,
который заставляет настраивать размеры элемента автоматически.
Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
Блочные элементы
HTML
Этот абзац - блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.
CSS
p { background-color: #8ABB55; }
Использование
- Блочные элементы могут отображаться только внутри элемента и его потомков.
Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
Содержание
Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого
структурного
различия
является идея, что
блочные элементы
создают
«более крупную»
структуру
, чем
встроенные элементы
.
Форматирование по умолчанию
По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на
блочные
и строчные использовалось в спецификации
HTML
до версии
4.01
.
В
HTML5
это
противопоставление заменено более
сложным набором
категорий контента .
Категория
«строчных
» элементов примерно соответствует категории , а для
«блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют
категории
потокового контента в
HTML5 (т.е., грубо говоря, «блочные» элементы - это потоковый контент минус текстовый контент).
Кроме того, есть
и другие категории, например, интерактивный контент.
Элементы
Ниже приведен
полный список всех
блочных элементов
(хотя
формально понятие
«блочный
» не применяется к
новым элементам
в HTML5
)
.
Контактная информация.
) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для дальнейшего распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого."> HTML5
Содержание
статьи.
представляет собой раздел документа с контентом, косвенно связанным с основным содержимым документа (часто представленным как боковая панель)."> HTML5
Побочное содержание.
(от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом .">
Длинная («блочная») цитата.
используется для раскрытия скрытой (дополнительной) информации."> HTML5
Раскрывающийся блок с подробностями.
определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы