Proprietà max-block-size CSS

Pagina precedente mask-type
Pagina successiva max-height

定义和用法

max-block-size Definition and usage

attribute specifies the maximum size of the element in the block direction. max-block-size If the size of the content in the block direction is less than the maximum value, then

attribute values do not take effect. max-block-size If the size of the content in the block direction is greater than the maximum value, it will apply

attribute values.Note: writing-mode related CSS properties max-block-size Defines the block direction, which affects

attributes result. For English pages, the block direction is downward, and the inline direction is from left to right. max-block-size CSS max-height attributes are similar to CSS properties and max-width max-block-size Very similar, but

The attribute depends on the block direction.

Instance

Example 1

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

Try it yourself

Example 2: Writing mode

Set the maximum size of the <div> element in the block direction to 60 pixels: writing-mode When the attribute value is set to vertical-lr, the block direction will change from downward to lateral, which will affect max-block-size How the attribute works:

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

Try it yourself

Example 3: Max-block-size vs Block-size

Observe a <div> element (block-size set to 100px) and another <div> element (max-block-size Different reactions when the content size changes (set to 100px):

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

Try it yourself

CSS syntax

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

Attribute value

Value	Description
auto	Default. The default max-block-size value of the element.
length	Specifies max-block-size, units such as px, pt, cm, etc. See:Unità CSS.
%	Specifies the percentage of the size on the corresponding axis relative to the parent element max-block-size.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	auto
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.maxBlockSize="60px"