Свойство CSS `block-size`
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с сентября 2021 года.
Свойство block-size CSS задаёт размер элемента вдоль блочной оси. Если writing-mode горизонтальный, оно соответствует height; если режим письма вертикальный, оно соответствует width. Связанное свойство — inline-size, которое задаёт другой размер элемента.
Попробуйте
block-size: 150px; writing-mode: horizontal-tb;
block-size: 150px; writing-mode: vertical-rl;
block-size: auto; writing-mode: horizontal-tb;
block-size: auto; writing-mode: vertical-lr;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box where you can change the block-size.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
justify-content: center;
color: white;
}
Синтаксис
/* <length> values */ block-size: 300px; block-size: 25em; block-size: anchor-size(height); block-size: calc(anchor-size(--my-anchor block) * 0.75); /* <percentage> values */ block-size: 75%; /* Keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content; block-size: fit-content(20em); block-size: auto; /* Global values */ block-size: inherit; block-size: initial; block-size: revert; block-size: revert-layer; block-size: unset;
Значения
Свойство block-size принимает те же значения, что и свойства width и height.
Формальное определение
| Начальное значение | auto |
|---|---|
| Применяется к | то же, что и width и height
|
| Наследуется | нет |
| Проценты | block-size содержащего блока |
| Вычисленное значение | то же, что и width и height
|
| Тип анимации | $1$, <a href="/en-US/docs/Web/CSS/Reference/Values/percentage#interpolation" title="Значения CSS-типа данных <percentage> интерполируются как действительные числа с плавающей точкой.">процент</a> или calc(); |
Формальный синтаксис
block-size =
<'width'>
Примеры
Размер блока при вертикальном тексте
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 200px;
}
Результат
Спецификации
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
block-size |
57
8
|
79
79
|
41 |
44
15
|
12.1
5.1
|
57
18
|
41 |
43
14
|
12.2
5
|
7.0
1.0
|
57
4.4
|
12.2
5
|
anchor-size |
125 |
125 |
147 |
111 |
26 |
125 |
147 |
83 |
26 |
27.0 |
125 |
26 |
auto |
8 |
79 |
41 |
15 |
5.1 |
18 |
41 |
14 |
5 |
1.0 |
4.4 |
5 |
fit-content |
57 |
79 |
94
41
|
44 |
12.1 |
57 |
94
41
|
43 |
12.2 |
7.0 |
57 |
12.2 |
fit-content_function |
Нет |
Нет |
91 |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
max-content |
57 |
79 |
66
41
|
44 |
12.1 |
57 |
66
41
|
43 |
12.2 |
5.0 |
57 |
12.2 |
min-content |
57 |
79 |
66
41
|
44 |
12.1 |
57 |
66
41
|
43 |
12.2 |
5.0 |
57 |
12.2 |
stretch |
138 |
138 |
Нет |
122 |
27 |
138 |
Нет |
91 |
27 |
30.0 |
138 |
27 |
См. также
- Соответствующие физические свойства:
widthиheight writing-mode
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/block-size
