block-size
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Свойство block-size
CSS задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам width
и height
и зависит от значения свойства writing-mode
.
css
/* <length> values */
block-size: 300px;
block-size: 25em;
/* <percentage> values */
block-size: 75%;
/* Keyword values */
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;
/* Global values */
block-size: inherit;
block-size: initial;
block-size: unset;
Если режим записи (writing mode) ориентирован по вертикали, то значение block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство
inline-size
, которое задаёт другое измерение элемента.
Начальное значение auto
Применяется к с такими же width
и height
Наследуется нет Проценты размер блока, содержащего элемент Обработка значения с такими же width
и height
Animation type длина, проценты или calc();
Синтаксис
Значения
Формальный синтаксис
block-size =
<'width'>
Пример
HTML
html
<p class="exampleText">Example text</p>
CSS
css
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 200px;
}
Спецификация
Specification |
---|
CSS Logical Properties and Values Level 1 # dimension-properties |
CSS Box Sizing Module Level 4 # sizing-values |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Отображаемые физические свойства:
width
andheight
writing-mode