Влад Мержевич
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры
И др.
Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (, например). Запрещено добавлять внутрь встроенных элементов блочные (пример 1).
Пример 1. Использование блочных элементов
Lorem ipsum dolor sit amet...
В данном примере абзац (тег
) вставляется внутрь контейнера
Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними. К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width ), отступов (margin ), полей (padding ) и границ (border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width .
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto , это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Lorem ipsum dolor sit amet...
Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег
). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3 ) вообще не применяется свойство width , поэтому оно определяется по умолчанию — auto . В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin , padding и border . Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Результат данного примера продемонстрирован на рис. 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. Пунктирная рамка
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.
Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width , но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height , поскольку по умолчанию браузер применяет аргумент auto , который заставляет настраивать размеры элемента автоматически.
Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги
, ,
,
,
и др., а также элементы, у которых свойство display
установлено как inline
. В основном они используются для изменения вида текста или его логического выделения.
По аналогии с блочными элементами перечислю их характерные особенности.
Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег , который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.
Для вёрстки строчные элементы применяются реже, чем блочные. Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры
И подобные широко распространённые теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц. В примере 3.16 показано использование тега для выделения отдельных слов.
Пример 3.16. Применение тега
Лягте животом на пол. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперед до полного сокращения мышц живота. Задержитесь на две секунды. Выполните восемь повторений.
Результат примера показан ниже (рис. 3.25).
Рис. 3.25. Текст, оформленный с помощью стилей
В данном примере тег и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счёт фонового цвета, рамки вокруг текста и сменой его цвета. Обратите внимание, что в результате переноса текста рамка вокруг него также перенеслась на другую строку. Во многих случаях это выглядит не очень красиво, поэтому можно запретить перенос текста через white-space : nowrap .
Для текста, который не обрамлён строчным тегом вроде создаётся анонимный строчный элемент. Для примера выше схема элементов будет следующей (рис. 3.26).
Рис. 3.26. Анонимные строчные элементы
Серым цветом на рисунке помечен текст внутри тега , а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.
Строчные элементы можно превращать в блочные с помощью свойства display и его значения block . Также возможно и обратное действие через значение inline (пример 3.17).
Пример 3.17. Свойство display
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Примечание
Исходя из различных критериев, основными из которых являются показатели целесообразности и эффективности приложенных усилий, можно однозначно сказать следующее. А именно, что достижение желаемых результатов требует гибкого подхода, основанного на опыте и глубоком понимании смысла вышеизложенного.
Результат примера приведен на рис. 3.27.
Рис. 3.27. Замена блочного элемента на строчный
В данном примере блочный тег
Отображается на веб-странице как строчный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей. Как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять тег
В виде строчного элемента. В принципе, аналогичным решением будет использовать вместо
Тег .
Учтите, что преобразование элемента в строчный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных.
Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные
и строчные элементы
. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ).
Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором , согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.
Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства. Данная модель преобразует каждый элемент документа таким образом, что он генерирует ноль или более прямоугольных боксов в соответствии с блочной моделью CSS. Положение этих боксов на странице определяется следующими факторами:
— размером элемента (с учётом того, заданы они явно или нет);
— типом элемента (строчный или блочный);
— схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
— отношениями между элементами в DOM;
— внутренними размерами содержащихся изображений;
— внешней информацией (например, размеры окна браузера).
Положение и размеры бокса(ов) каждого элемента рассчитываются относительно краёв прямоугольной блока, так называемого «содержащего блока» (containing block). Размеры бокса не ограничиваются размерами содержащего блока, поэтому при определённых условиях он может выходить за его границы.
В блочной модели элемент рассматривается как прямоугольный контейнер, имеющий область содержимого и необязательные рамки и отступы (внутренние и внешние). Свойство display определяет тип контейнера элемента. Для каждого элемента существует значение браузера по умолчанию.
Рис. 1. Блочная модель элемента
Область содержимого — это содержимое элемента, например, текст или изображение.
Внутренний отступ задаётся свойством padding . Внутренний отступ — это расстояние между основным содержимым и его границей (рамкой). Если для элемента задать фон, то он распространится также и на поля элемента. Внутренний отступ не может принимать отрицательных значений, в отличие от внешнего отступа.
Внешний отступ задаётся свойством margin . Он добавляет расстояние снаружи элемента от внешней границы рамки до соседних элементов, тем самым разделяя элементы на странице. Внешние отступы всегда остаются прозрачными и через них виден фон родительского элемента.
Значения padding и margin задаются в следующем порядке: верхнее, правое, нижнее и левое.
Граница , или рамка элемента, задаётся с помощью свойства border . Если цвет рамки не задан, она принимает цвет основного содержимого элемента, например, текста. Если рамка имеет разрывы, то сквозь них будет проступать фон элемента.
Внешние, внутренние отступы и рамка элемента не являются обязательными, по умолчанию их значение равно нулю. Тем не менее, некоторые браузеры добавляют этим свойствам положительные значения по умолчанию на основе своих таблиц стилей. Очистить стили браузеров для всех элементов можно при помощи универсального селектора:
* { margin: 0; padding: 0; }
Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display , такие как block , list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.
,