Содержание
Блочная модель CSS описывает прямоугольные блоки, которые генерируются для элементов в дереве документа и размещаются в соответствии с моделью визуального форматирования.
У каждого блока есть область содержимого (например, текст, изображение, и т.п.) и необязательно вокруг него область отступа, границы, и поля; размер каждой области определяется свойствами, которые определены ниже. Следующий рисунок иллюстрирует взаимное расположение этих областей, а также терминологию, используемую для обращения к их отдельным частям – полям, границам и отступам:
Поля, границы и отступы могут быть разбиты на левые, правые, верхние и нижние сегменты (например, на приведенном рисунке "LM" обозначает левое поле, "RP" - отступ справа, а "TB" - верхнюю границу).
Периметр каждой из четырех областей (содержимого, поля, границы и отступа) называется "краевой линией" (иногда просто краем), так что для каждого блока есть четыре края:
Любая краевая линия может быть разбита на четыре сегмента: верхний, правый, нижний и левый
Размеры области содержимого блока – ширина содержимого и высота содержимого – зависят от нескольких факторов: установлены ли у элемента, генерирующего блок, такие свойства, как 'width' и 'height', содержит ли блок текст или другие блоки, является ли блок таблицей и т.д. Ширина и высота блока обсуждаются в разделе Подробное описание модели визуального форматирования.
Стиль фона областей содержимого, отступов и границ блока определяется свойством 'background' элемента, генерирующего блок. Фон поля – всегда прозрачен.
Приводимый далее пример иллюстрирует сосуществование полей, отступов и границ. Следующий HTML-документ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Примеры полей, отступов и границ</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* Границы не определены */
}
LI {
color: white; /* цвет текста – белый */
background: blue; /* Содержимое, отступы будут синими */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Обратите внимание: правый отступ - 0px */
list-style: none /* без глифов перед элементами списка */
/* Границы не установлены */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* определяется ширина границы со всех сторон */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Первый элемент списка
<LI class="withborder">Второй элемент списка имеет большую длину,
для того чтобы проиллюстрировать процесс переноса.
</UL>
</BODY>
</HTML>
порождает дерево документа, в котором, помимо прочего, имеется элемент UL, обладающий двумя дочерними элементами LI.
На первом из следующих рисунков показан результат трансляции приведенного документа. На втором иллюстрируется взаимосвязь между полями, отступами и границами элемента UL и его дочерних элементов LI. (Рисунок выполнен без соблюдения масштаба.)
Обратите внимание на следующее:
Свойства поля определяют ширину области поля блока. Стенографическое свойство 'margin' позволяет управлять шириной всех четырех сегментов, в то время как другие свойства поля дают такую возможность только для соответствующих сегментов. Эти свойства применяются ко всем элементам, но вертикальные поля не будут воздействовать на незамещаемые элементы строкового уровня.
Свойства, описанные в этом разделе, относятся к типу значений <ширина поля>, которое может принимать одно из следующих значений:
Свойства полей могут принимать отрицательные значения, но в конкретных реализациях могут накладываться различные ограничения.
| Значение: | <ширина поля> | inherit |
| Начальное значение: | 0 |
| Область применения: | все элементы, за исключением элементов с типом отображения в таблице, отличном от table-caption, table и inline-table |
| Наследование: | нет |
| Процентное задание значений: | относительно ширины контейнера |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное соотношение как определено, или абсолютная длина |
Эти свойства не будут воздействовать на незамещаемые элементы строкового уровня.
| Значение: | <ширина поля> | inherit |
| Начальное значение: | 0 |
| Область применения: | все элементы, за исключением элементов с типом отображения в таблице, отличном от table-caption, table и inline-table |
| Наследование: | нет |
| Процентное задание значений: | относительно ширины контейнера |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное соотношение как определено, или абсолютная длина |
Эти свойства устанавливают значения ширины верхнего, нижнего, правого и левого полей блока.
h1 { margin-top: 2em }
| Значение: | <ширина поля>{1,4} | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | все элементы, за исключением элементов с типом отображения в таблице, отличном от table-caption, table и inline-table |
| Наследование: | нет |
| Процентное задание значений: | относительно ширины контейнера |
| Устройства: | визуальные |
| Вычисляемое значение: | см. каждое свойство в отдельности |
Свойство 'margin' является стенографическим и используется в таблицах стилей для одновременной настройки следующих свойств: 'margin-top', 'margin-right', 'margin-bottom', и 'margin-left'.
Если оно принимает только одно значение, то это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе – к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам, соответственно.
body { margin: 2em } /* ширина всех полей установлена в 2em */
body { margin: 1em 2em } /* верхнее и нижнее = 1em, правое и левое = 2em */
body { margin: 1em 2em 3em } /* верхнее = 1em, правое = 2em, нижнее = 3em, левое = 2em, */
Последнее правило верхнего примера равнозначно следующему:
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* копируется значение противоположной стороны (правой) */
}
В данной спецификации выражение перекрывающиеся поля обозначает, что граничащие друг с другом поля (между ними нет областей непустого содержимого, отступов или границ, ни зазоров) двух или более блоков (следующих друг за другом или вложенных один в другой) сливаются в одно общее поле.
В CSS 2.1 горизонтальные поля никогда не перекрываются.
Вертикальные поля могут перекрываться только между определенными блоками:
У элемента, который имеет примененный к нему зазор, никогда не перекрывается его верхнее поле с нижним полем его родительского блока.
Примите во внимание, что позиции элементов, чьи поля были перекрыты, не отражаются на позиционировании остальных элементов, с полями которых они были перекрыты; позиция верхнего края границы требуется только для размещения потомков этого элемента.
Нижнее поле in-flow элемента уровня блока всегда соседствует с верхним полем его следующего in-flow сестринского элемента уровня блока, кроме случая, когда у сестринского элемента имеется зазор.
Верхнее поле in-flow элемента уровня блока соседствует с верхним полем его первого in-flow дочернего элемента уровня блока, если у элемента нет верхней границы, нет верхнего отступа, и если дочерний элемент не имеет зазора.
Нижнее поле in-flow элемента уровня блока со свойством 'height', установленным в 'auto', и свойством 'min-height', имеющим значение меньше, чем используемая высота элемента, и свойство 'max-height' имеет значение выше, чем используемая высота элемента, соседствует с нижним полем его последнего in-flow дочернего элемента уровня блока, если элемент не имеет нижнего отступа или границы.
Собственные поля элемента примыкают друг к другу если свойство 'min-height' имеет нулевое значение, и он не имеет ни вертикальных границ, ни вертикальных отступов, и его свойство 'height' имеет значение или 0 или 'auto', и он не продолжает линейный блок, и все поля (если имеются) его in-flow дочерних элементов – смежные.
Когда собственные поля элемента перекрываются, и этот элемент имеет примененный к нему зазор, то его верхнее поле перекрывается со смежными полями последующих сестринских элементов, но эти результирующие поля не перекрываются с нижним полем родительского блока.
Перекрытие основывается на используемом значении свойств 'padding', 'margin', и 'border' (т.е., после разрешения любых процентных соотношений). Перекрывающееся поле рассчитывается через используемое значение различных полей.
Более подробную информацию о перекрывающихся полях можно найти в примерах полей, отступов и границ.
Свойства отступов позволяют определять ширину области отступов блока. Свойство 'padding' является стенографическим и позволяет устанавливать ширину всех четырех сегментов отступа одновременно, в то время как остальные свойства относятся только к отдельным сегментам.
Свойства, рассматриваемые в данном разделе, относятся к типу значений <ширина отступа>, который может принимать одно из следующих значений:
В отличие от свойств поля, значения отступов не могут принимать отрицательные значения. Как и для свойств поля, процентные соотношения, задаваемые для свойств отступов, вычисляются относительно ширины контейнера сгенерированного блока.
| Значение: | <ширина отступа> | inherit |
| Начальное значение: | 0 |
| Область применения: | Все элементы, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column |
| Наследование: | нет |
| Процентное задание значений: | относительно ширины контейнера |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное соотношение как определено, или абсолютная длина |
Эти свойства устанавливают значение ширины верхнего, правого, нижнего и левого отступов блока.
blockquote { padding-top: 0.3em }
| Значение: | <ширина отступа>{1,4} | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | Все элементы, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column |
| Наследование: | нет |
| Процентное задание значений: | относительно ширины контейнера |
| Устройства: | визуальные |
| Вычисляемое значение: | см. каждое свойство в отдельности |
Свойство 'padding' является стенографическим и используется в таблицах стилей для одновременной настройки следующих свойств: 'padding-top', 'padding-right', 'padding-bottom', и 'padding-left'.
Если оно принимает только одно значение, то это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему отступам, а второе – к правому и левому отступам. Если оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам, соответственно.
Цвет или изображение, используемые для оформления фона отступов, задаются с помощью свойства 'background':
h1 {
background: white;
padding: 1em 2em;
}
В приведенном примере ширина вертикальных отступов ('padding-top' и 'padding-bottom') равна '1em', а горизонтальных ('padding-right' и 'padding-left') – '2em'. Единица измерения 'em' задается относительно размера шрифта элемента: '1em' эквивалентно размеру используемого шрифта.
Свойства границы позволяют устанавливать ширину, цвет и стиль области границы блока. Данные свойства применяются ко всем элементам.
Примечание. В большей степени оно относится к HTML-документам, в которых способ отображения, используемый агентом пользователя для вывода определенных элементов интерфейса пользователя (например, кнопок, меню и т.д.), отличается от способа отображения "обычных" элементов.
Свойства ширины границы определяют ширину области границы. Свойства, рассматриваемые в данном разделе, относятся к типу значений <ширина границы>, который может принимать одно из следующих значений:
Интерпретация первых трех значений зависит от агента пользователя. Но при этом всегда должно соблюдаться следующее соотношение:
'thin' <='medium' <= 'thick'.
Более того, все эти три значения не должны изменяться на протяжении всего документа.
| Значение: | <ширина границы> | inherit |
| Начальное значение: | medium |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | абсолютная длина; '0' если стиль границ – 'none' или 'hidden' |
Эти свойства определяют значение ширины верхнего, правого, нижнего и левого сегментов границы блока.
| Значение: | <ширина границы>{1,4} | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | см. каждое свойство в отдельности |
Это свойство является стенографическим и используется в таблицах стилей для одновременной установки следующих свойств: 'border-top-width', 'border-right-width', 'border-bottom-width', и 'border-left-width'.
Если оно принимает только одно значение, то это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе – к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам, соответственно.
В следующих примерах в комментариях указаны значения ширины верхней, правой, нижней и левой границ, получившиеся в результате применения правил:
h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */
Свойства цвета границы определяют цвет границы блока.
| Значение: | <цвет> | transparent | inherit |
| Начальное значение: | значение свойства 'color' |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | если берется из свойства 'color', то вычисленное значение свойства 'color'; в противном случае - как определено |
| Значение: | [ <цвет> | transparent ]{1,4} | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | см. каждое свойство в отдельности |
Свойство 'border-color' определяет цвет четырех границ. Значения имеют следующий смысл:
Свойство 'border-color' может иметь от одного до четырех значений, каждое из которых присваивается различным сегментам границы подобно тому, как это происходит у свойства 'border-width'.
Если цвет границы элемента не указан в свойстве границы, то агентам пользователей необходимо использовать значение свойства 'color' в качестве вычисленного значения для цвета границы.
В следующем примере граница представляется сплошной черной линией.
p {
color: black;
background: white;
border: solid;
}
Свойства стиля границы определяют стиль линии границ блока (сплошная, двойная, пунктирная и т.д.). Свойства, рассматриваемые в этом разделе, относятся к типу значений <стиль границы> , который может принимать одно из следующих значений:
Все границы прорисовываются поверх фона блока. Цвет прорисовки границ для значений 'groove', 'ridge', 'inset' и 'outset' следует выбирать исходя из свойства 'border-color' элемента, но агенты пользователей могут использовать свои собственные алгоритмы для вычисления используемого значения цвета. Например, если свойство 'border-color' имеет значение 'silver', то агент пользователя может использовать градиент цвета от белого до темно-серого для отображения границ.
| Значение: | <стиль границы> | inherit |
| Начальное значение: | none |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | как определено |
| Значение: | <стиль границы>{1,4} | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | см. каждое свойство в отдельности |
Свойство 'border-style' определяет стиль всех четырех границ. Оно может иметь от одного до четырех значений, каждое из которых присваивается различным сегментам границы подобно тому, как это происходит у свойства 'border-width', описанного выше.
#xy34 { border-style: solid dotted }
В примере, приведенном выше, горизонтальные границы будут иметь стиль 'solid', а вертикальные - стиль 'dotted'.
Так как начальное значение стиля границы равно 'none', то она не будет видна до тех пор, пока для нее не будет установлен какой-либо стиль.
| Значение: | [ <ширина границы> || <стиль границы> || <'border-top-color'> ] | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | см. каждое свойство в отдельности |
Данное свойство является стенографическим свойством для настроек ширины, стиля и цвета для верхнего, правого, нижнего и левого сегментов границы блока.
h1 { border-bottom: thick solid red }
Приведенное правило установит значение ширины, стиль и цвет нижней границы элемента H1. Свойства, значения которых не указаны, примут свои начальные. Так как в следующем правиле цвет границы не определен, ей будет присвоен цвет, заданный свойством 'color':
H1 { border-bottom: thick solid }
| Значение: | [ <ширина границы> || <стиль границы> || <'border-top-color'> ] | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | см. каждое свойство в отдельности |
Свойство 'border' является стенографическим для одновременного определения ширины, цвета и стиля всех четырех границ блока. В отличие от стенографических свойств 'margin' и 'padding', свойство 'border' не может устанавливать различные значения для четырех сегментов границы. Чтобы это сделать, необходимо использовать другие свойства границы.
Например, первое правило эквивалентно набору четырех правил, приведенных после него:
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Так как области действия различных свойств могут пересекаться, то порядок следования описывающих их правил имеет большое значение.
Рассмотрим следующий пример:
blockquote {
border: solid red;
border-left: double;
color: black;
}
В этом примере левый сегмент границы отображается черным цветом, в то время как все остальные сегменты - красным. Это обусловлено действием свойства 'border-left', определяющего ширину, стиль и цвет левого сегмента. Так как свойство 'border-left' не указывает значение цвета, то последнее будет заимствовано из свойства 'color'. Тот факт, что свойство 'color' было определено после свойства 'border-left' , в данном случае не имеет особого значения.
Для каждого строкового блока, агенты пользователей должны брать строковые блоки, сгенерированные для каждого строкового блока и и представлять поля, границы и отступы в визуальном порядке (а не в логическом порядке).
Если свойство элемента 'direction' имеет значение 'ltr', то крайний левый сгенерированный блок первого линейного блока, в котором представлен элемент, имеет левое поле, левую границу и левый отступ, а крайний правый сгенерированный блок последнего линейного блока, в котором представлен элемент, имеет правый отступ, правую границу и правое поле.
Если свойство элемента 'direction' имеет значение 'rtl', то крайний правый сгенерированный блок первого линейного блока, в котором представлен элемент, имеет правый отступ, правую границу и правое поле, а крайний левый сгенерированный блок последнего линейного блока, в котором представлен элемент, имеет левое поле, левую границу и левый отступ.