From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/max-block-size/index.html | 178 +++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/es/web/css/max-block-size/index.html (limited to 'files/es/web/css/max-block-size/index.html') diff --git a/files/es/web/css/max-block-size/index.html b/files/es/web/css/max-block-size/index.html new file mode 100644 index 0000000000..5707a6ce0f --- /dev/null +++ b/files/es/web/css/max-block-size/index.html @@ -0,0 +1,178 @@ +--- +title: max-block-size +slug: Web/CSS/max-block-size +translation_of: Web/CSS/max-block-size +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS max-block-size especifica el tamaño máximo de un elemento en la dirección opuesta a la de la dirección de escritura según lo especificado por {{cssxref("writing-mode")}}. Esto es, si la dirección de escritura es horizontal, entonces max-block-size es equivalente a {{cssxref("max-height")}}; si la dirección de escritura es vertical, max-block-size es lo mismo que {{cssxref("max-width")}}.

+ +

La longitud máxima de la otra dimensión se especifica usando la propiedad {{cssxref("max-inline-size")}}.

+ +

Esto es útil porque max-width siempre se utiliza para tamaños horizontales y max-height siempre se usa para tamaños verticales, y si necesitas establecer longitudes en función del tamaño del contenido del texto, debes poder hacerlo con la dirección de escritura en mente.

+ +

En cualquier momento usarías normalmente max-height o max-width, en su lugar deberías usar max-block-sizepara establecer el máximo "height" del contenido (even though this may not be a vertical value) y max-inline-size para establecer el máximo "width" del contenido (aunque esto puede ser más bien vertical en lugar de horizontal). Mira el {{SectionOnPage("/en-US/docs/Web/CSS/writing-mode", "Example")}}, que muestra los diferentes modos de escritura en acción.

+ +
{{EmbedInteractiveExample("pages/css/max-block-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* <percentage> values */
+max-block-size: 75%;
+
+/* Keyword values */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Global values */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

El valor de la propiedad max-block-size puede ser cualquier valor legal de las popiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}:

+ +

{{page("/en-US/docs/Web/CSS/max-width", "Values")}}

+ +

Cómo writing-mode afecta la directionalidad

+ +

Los valores de writing-mode afecta la asignación de max-block-size a max-width o max-height como sigue:

+ + + + + + + + + + + + + + + + + + +
Valores de writing-modemax-block-size es equivalente a
horizontal-tb, lr {{deprecated_inline}}, lr-tb {{deprecated_inline}}, rl {{deprecated_inline}}, rb {{deprecated_inline}}, rb-rl {{deprecated_inline}}{{cssxref("max-height")}}
vertical-rl, vertical-lr, sideways-rl {{experimental_inline}}, sideways-lr {{experimental_inline}}, tb {{deprecated_inline}}, tb-rl {{deprecated_inline}}{{cssxref("max-width")}}
+ +
+

The writing-mode values sideways-lr and sideways-rl were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.

+
+ +
+

The writing modes lr, lr-tb, rl, rb, and rb-tl are no longer allowed in {{Glossary("HTML")}} contexts; they may only be used in {{Glossary("SVG")}} 1.x contexts.

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

En este ejemplo, el mismo texto (las oraciones iniciales del {{interwiki("wikipedia", "Herman Melville", "Herman Melville's")}} novel {{interwiki("wikipedia", "Moby-Dick")}}) es presentado en ambos modos de escritura: horizontal-tb y vertical-rl.

+ +

Todo lo demás sobre las dos cajas es idéntico, incluidos los valores utilizados para {{cssxref("max-block-size")}}.

+ +

Contenido HTML 

+ +

El HTML simplemente establece los dos bloques {{HTMLElement("div")}} que serán presentados con su {{cssxref("writing-mode")}} estableciendo el uso de las clases horizontal o vertical. Ambas cajas comparten la clase standard-box, que simplemente establece colores, relleno, y sus respectivos valores de max-block-size.

+ +
<p>Writing mode <code>horizontal-tb</code> (the default):</p>
+<div class="standard-box horizontal">
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+</div>
+
+<p>Writing mode <code>vertical-rl</code>:</p>
+<div class="standard-box vertical">
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+</div>
+ +

Contenido CSS 

+ +

El CSS está definido por tres clases. La primera, standard-box, es aplicada a ambas cajas, como se ve arriba. Proporciona un estilo estándar que incluye los tamaños de bloque mínimo y máximo, tamaño de fuente, etc.

+ +

Después que vienen las clases horizontal y vertical, que agregan las propiedades {{cssxref("writing-mode")}} para la caja, con el valor establecido para horizontal-tb o vertical-rl dependiendo en qué clase se usa.

+ +
.standard-box {
+  padding: 4px;
+  background-color: #abcdef;
+  color: #000;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+  max-block-size: 160px;
+  min-block-size: 100px;
+}
+
+.horizontal {
+  writing-mode: horizontal-tb;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+
+ +

Resultado

+ +

Las dos cajas se ven así al final:

+ +

{{EmbedLiveSample("Ejemplo", 600, 850)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.max-block-size")}}

+ +

Mira también

+ + -- cgit v1.2.3-54-g00ecf