CSS | max-block-size 属性

CSS中的max-block-size属性用于设置一个块级元素的最大高度。

该属性用于控制一个块级元素在跨越多行时的最大高度，当然，只有在元素的高度大于该最大高度时，该属性才会生效。

语法

max-block-size: <length> | <percentage> | max-content | min-content | fit-content;

取值

• <length>：表示一个固定长度的值，可以使用像素、点数、百分比等单位。
• <percentage>：表示元素父容器的百分比宽度。
• max-content：表示元素的内容高度中的最大值。
• min-content：表示元素的内容高度中的最小值。
• fit-content：表示元素的内容高度所需的最小值和最大值之间的值。

示例

/* 设置最大高度为200px */
max-block-size: 200px;

/* 设置最大高度为50% */
max-block-size: 50%;

/* 设置最大高度为内容高度的最大值 */
max-block-size: max-content;

/* 设置最大高度为内容高度的最小值 */
max-block-size: min-content;

/* 设置最大高度为内容高度所需的最小值和最大值之间的值 */
max-block-size: fit-content;

注意事项

• 该属性只能被应用在块级元素上，不能被应用在行内元素上。
• 如果该属性的值小于元素的实际高度，则会被忽略；如果该属性的值大于元素的实际高度，则元素的高度会按该属性的值进行限制。
• 该属性在浏览器支持方面存在一些差异，需要谨慎使用。