Тип CSS `<box-edge>`

Типы значений <box-edge> представляют ключевое слово края блока, например content-box и border-box. Ключевые слова краёв блока используются для определения различных аспектов блочной модели элемента, а также положения и отображения элементов на экране.

Ключевые слова краёв блока являются компонентами, помимо прочего, типов данных <visual-box>, <layout-box>, <paint-box>, <coord-box> и <geometry-box>. Эти типы применяются к таким свойствам, как transform-box и background-clip.

Синтаксис

<visual-box> = content-box | padding-box | border-box /* the three <box> values */
<layout-box> or <shape-box> = <visual-box> | margin-box
<paint-box> = <visual-box> | fill-box | stroke-box
<coord-box> = <paint-box> | fill-box | stroke-box | view-box
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

Значения

Значение <box-edge> может иметь тип <visual-box>, <layout-box>, <paint-box>, <coord-box> или <geometry-box>.

<visual-box>

Обозначает прямоугольный блок, создаваемый для элемента и видимый пользователю на веб-странице. Он включает содержимое элемента, внутренние отступы и границу. Также называется <box>; это значение не включает область внешних отступов. Этот тип значения используется для свойств background-clip и overflow-clip-margin.

<layout-box>

Обозначает пространство, занимаемое элементом, включая его содержимое, внутренние отступы, границу и внешние отступы. Этот тип значения используется для целей компоновки и позиционирования. Также называется <shape-box>; этот тип значения используется для свойства shape-outside.

<paint-box>

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

<coord-box>

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

<geometry-box>

Задаёт опорный блок для базовой фигуры или, если указан самостоятельно, превращает края указанного блока, включая форму углов (например, border-radius), в контур обрезки. Этот тип значения используется для свойств clip-path, mask-clip и mask-origin, а также для атрибута SVG clip-path; он также используется в значениях свойства border-shape.

Ключевые слова

Ключевые слова <box-edge> определены следующим образом:

content-box

Обозначает внешний край области содержимого блока. Блок содержимого — самый внутренний блок. Область содержимого включает фактическое содержимое, например текст, изображения или другие HTML-элементы. В SVG это значение трактуется как fill-box.

padding-box

Обозначает внешний край внутренних отступов блока. Если с какой-либо стороны внутренние отступы отсутствуют, значение совпадает с content-box. В SVG padding-box трактуется как fill-box. Область внутренних отступов окружает область содержимого, начинаясь у внешнего края блока содержимого.

border-box

Обозначает внешний край границы блока. Если с какой-либо стороны граница отсутствует, значение совпадает с padding-box. В SVG border-box трактуется как stroke-box. Область границы окружает область внутренних отступов, начинаясь у внешнего края блока внутренних отступов.

half-border-box

Обозначает форму блока, проходящую через середину области границы: внутренняя половина области границы находится внутри фигуры, а внешняя половина — снаружи.

margin-box

Обозначает внешний край внешних отступов блока. Если с какой-либо стороны внешние отступы отсутствуют, значение совпадает с border-box. В SVG margin-box трактуется как stroke-box.

fill-box

Обозначает ограничивающую рамку объекта в SVG. В CSS fill-box трактуется как content-box. Используется для обтекания содержимого по краям, заданным значениями coord-box.

stroke-box

Обозначает ограничивающую рамку обводки в SVG. В CSS stroke-box трактуется как border-box. Используется для определения формы элемента при применении обводок.

view-box

Обозначает исходный блок ближайшего элемента области просмотра SVG. Исходный блок — это прямоугольник с шириной и высотой исходной системы координат SVG, заданной атрибутом viewBox для этого элемента. Исходный блок расположен так, что его верхний левый угол привязан к началу системы координат. В CSS view-box трактуется как border-box.

Примечание: Если область просмотра SVG не привязана к началу координат, исходный блок не соответствует области просмотра SVG.

Спецификации

См. также

• Модуль блочной модели CSS