Atributo max-block-size de CSS

Página anterior mask-type
Página siguiente max-height

Definición y uso

max-block-size La propiedad especifica el tamaño máximo del elemento en la dirección del bloque.

Si el tamaño del contenido en la dirección del bloque es menor que el valor máximo, entonces max-block-size El valor de la propiedad no tiene efecto.

Si el tamaño del contenido en la dirección del bloque es mayor que el valor máximo, se aplica max-block-size valores de la propiedad.

Nota:propiedades CSS relacionadas writing-mode Define la dirección del bloque, lo que afecta max-block-size el resultado de las propiedades. Para las páginas en inglés, la dirección del bloque es hacia abajo y la dirección en línea es de izquierda a derecha.

CSS max-block-size propiedades se comparan con las propiedades CSS max-height y max-width Muy similar, pero max-block-size La propiedad depende de la dirección del bloque.

Instancia

Ejemplo

Ejemplo 1

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

Intente hacerlo usted mismo

Ejemplo 2: Modo de escritura

Establecer el tamaño máximo en el bloque del elemento <div> en 60 píxeles: writing-mode Al establecer el valor de la propiedad en vertical-lr, la dirección del bloque se cambia de vertical a lateral, lo que afecta max-block-size Cómo funciona la propiedad:

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

Intente hacerlo usted mismo

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

Observar un elemento <div> (block-size por ejemplo, 100px) y otro elemento <div> (max-block-size Reacciones diferentes en la dimensión del contenido cuando cambia (por ejemplo, 100px):

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

Intente hacerlo usted mismo

Sintaxis de CSS

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

Valor de la propiedad

Valor	Descripción
auto	Predeterminado. Valor predeterminado de max-block-size del elemento.
longitud	Especifica max-block-size, con unidades como px, pt, cm, etc. Ver:Unidades CSS.
%	Especifica el tamaño en porcentaje de la dimensión correspondiente al eje del elemento padre max-block-size.
initial	Establece esta propiedad en su valor predeterminado. Ver initial.
inherit	Hereda esta propiedad del elemento padre. Ver inherit.

Detalles técnicos

Valor predeterminado:	auto
Herencia:	No
Producción de animación:	Compatibilidad. Ver:Propiedades relacionadas con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.maxBlockSize="60px"