CSS свойство max-block-size

Определение и использование

max-block-size атрибут определяет максимальный размер элемента в направлении блока.

Если размер содержимого в направлении блока меньше максимального значения, то max-block-size значение атрибута не действует.

Если размер содержимого в направлении блока больше максимального значения, то применяется max-block-size значения атрибутов.

Обратите внимание:связанные CSS свойства writing-mode определяет направление блока, что влияет на max-block-size результаты свойств. Для английских страниц направление блока снизу, а направление строчных элементов слева направо.

CSS max-block-size атрибуты соответствуют свойствам CSS max-height и max-width Они очень похожи, но max-block-size Атрибут зависит от направления блока.

Пример

Пример 1

установить максимальный размер блока элемента <div> в 60 пикселей:

div {
  max-block-size: 60px;
}

Попробуйте сами

Пример 2: Режим записи

Установить максимальный размер блока элемента <div>; writing-mode Атрибут значения установлен на vertical-lr, направление блока изменяется с вертикального на горизонтальное, что влияет на max-block-size Как работает атрибут:

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

Попробуйте сами

Пример 3: Max-block-size vs Block-size

наблюдайте за элементом <div> (block-size например, 100px) и другого элемента <div> (max-block-size различные реакции при изменении размера содержимого (например, 100px):

#div1 {
  max-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

Попробуйте сами

CSS синтаксис

max-block-size: auto|length|initial|inherit;

Значение атрибута

Технические детали

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Связанные страницы

См. также:Свойство block-size CSS

См. также:CSS свойство min-block-size

См. также:CSS свойство max-height

См. также:CSS свойство max-width

См. также:Свойство writing-mode в CSS