...

,

---

,

,

,

,
....

Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются последовательно один под другим . По умолчанию два блочных элемента не могут располагаться на одной строке.

Один или несколько блоков также могут располагаться внутри другого (родительского ) блочного элемента.

В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.



Любой блок имеет форму прямоугольника.

Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content - содержание ).

Границе блока при помощи свойства border можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.

Между содержимым и границей существуют внутренние расстояния - поля (свойство padding ). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойства padding , то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.

Вокруг блока - за его границей существуют пустые, ничем не занятые области, называемые отступами (свойство margin ). Отступы - это расстояния от границы блока, до ближайших элементов, или, если их нет, то до краев окна браузера. Отступы также, как и поля по умолчанию отсутствуют, либо имеют минимальную ширину, автоматически определяемую браузером.

Также для блока можно задать фиксированную ширину (свойство width ) и высоту (свойство height ), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.

Фрагмент кода:

Строчные элементы расположены на одной строке. Они заключены в блочный элемент - абзац! Перенос текста происходит автоматически - в конце строки.


Следующий блок - абзац, начинается с новой строки.



Два абзаца расположены.


Внутри блока - тега div !



Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!

Результат:

Строчные элементы расположены на одной строке. Они заключены в блочный элемент - абзац! Перенос текста происходит автоматически - в конце строки.

Следующий блок - абзац, начинается с новой строки.

Два абзаца расположены.

Внутри блока - тега div !

Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!

Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).

Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:

Блочные элементы

HTML

Этот абзац - блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.

CSS

p { background-color: #8ABB55; }

Использование

• Блочные элементы могут отображаться только внутри элемента и его потомков.

Блочные против строчных

Существует несколько ключевых отличий между блочными и строчными элементами:

Содержание Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру , чем встроенные элементы . Форматирование по умолчанию По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.

Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01 . В HTML5 это противопоставление заменено более сложным набором категорий контента . Категория «строчных » элементов примерно соответствует категории , а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы - это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.

Элементы

Ниже приведен полный список всех блочных элементов (хотя формально понятие «блочный » не применяется к новым элементам в HTML5 ) .

Контактная информация. ) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для дальнейшего распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.">

HTML5 Содержание статьи. представляет собой раздел документа с контентом, косвенно связанным с основным содержимым документа (часто представленным как боковая панель)."> HTML5 Побочное содержание. (от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом .">

Длинная («блочная») цитата. используется для раскрытия скрытой (дополнительной) информации.">

HTML5 Раскрывающийся блок с подробностями. определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы

могут интегрироваться с диалогом с помощью указания атрибута method=" dialog returnvalue value submit.>

HTML5 Диалоговое окно.

Описание определения. ) является базовым контейнером для элементов основного потока (flow content). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя ">

Фрагмент документа. (от англ. Description List), служащий контейнером для списка пар терминов и их описаний. Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).">

Список определений.

Термин в списке определений.

Группирование элементов формы.

,
и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block , list-item , table и в некоторых случаях run-in .

Для блочных элементов характерны следующие особенности.

• Блоки располагаются по вертикали друг под другом.
• На прилегающих сторонах элементов действует эффект схлопывания отступов.
• Запрещено вставлять блочный элемент внутрь строчного. Например,

  Заголовок

  не пройдёт валидацию, правильно вложить теги наоборот -

  Заголовок

  .
• По ширине блочные элементы занимают всё допустимое пространство.
• Если задана ширина контента (свойство width ), то ширина блока складывается из значений width , полей, границ, отступов слева и справа.
• Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
• Если задана высота контента (свойство height ), то высота блока складывается из значения height , полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
• На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align .
• Текст по умолчанию выравнивается по левому краю.

Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет

как универсальный кирпичик вёрстки. Тег

допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь

. В примере 3.13 показан фрагмент кода сайта CSS Zen Garden , где активно применяются эти теги для формирования требуемой конструкции.

Пример 3.13. Использование тега

css Zen Garden

The Beauty of CSS Design

A demonstration of what can be accomplished visually through CSS - based design. Select any style sheet from the list to load it into this page.

Если в одном блочном элементе содержатся строчные элементы наряду с блочными, то вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя. В примере 3.14 внутри

располагается два тега

И рядовой текст. Поскольку этот элемент анонимный, напрямую только к нему одному нельзя применить стили.

Пример 3.14. Анонимный блок

Первый абзац

Анонимный блок

Второй абзац

Схематично блоки в данном примере показаны на рис. 3.23. Серым цветом выделены блочные теги

А пунктиром - анонимный блок.

Рис. 3.23. Блоки в документе

Преобразование в блочный элемент

В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height . В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.

Пример 3.15. Меню

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Метод простых итераций

Метод случайных чисел

Метод дихотомии

Метод золотого сечения



Следует понимать, что превращение элемента в блочный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных, даже если через стили они установлены блочными.

HTML (Hypertext Markup Language ) elements historically were categorized as either "block-level" elements or "inline" elements . By default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.

Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The following example demonstrates the block-level element"s influence:

Block-level elements

HTML

This paragraph is a block-level element; its background has been colored to display the paragraph"s parent element.

CSS

p { background-color: #8ABB55; }

Usage

• Block-level elements may appear only within a element.

Block-level vs. inline

There are a couple of key differences between block-level elements and inline elements:

Content model Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. Default formatting By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.

Elements

The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5).

Contact information. Article content. element represents a portion of a document whose content is only indirectly related to the document" s main content.> Aside content. Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the element.">

Long ("block") quotation.

Disclosure widget. element represents a dialog box or other interactive component, such as an inspector or window.">

Dialog box. element provides the details about or the definition of the preceding term (

) in a description list (

).">

Describes a term in a description list. ) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.">

Document division. element represents a description list. The element encloses a list of groups of terms (specified using the

element) and descriptions (provided by

elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).">

Description list. element specifies a term in a description or definition list, and as such must be used inside a

element.">

Description list term. element is used to group several controls as well as labels () within a web form.">

Field set label.

element, if any.">