altura de línea y alineación vertical: los atributos simples no son simples

Primero piense en una pregunta: la altura predeterminada del elemento div es 0. ¿Por qué aumenta la altura después de agregar texto? ¿Qué atributo determina esta altura? Si es un elemento de luz, ¿quién determina la altura?

Como se muestra en la figura anterior, el resultado debe ser muy claro: el atributo de altura de línea afecta la altura del elemento div y el atributo de tamaño de fuente afecta la altura del elemento de extensión A. La declaración precisa debe ser que la altura de la línea determina la altura del área de contenido de los elementos de bloque, mientras que el tamaño de fuente afecta la altura del área de texto de los elementos en línea. Recuerde que el área de contenido y el área de texto no son lo mismo. concepto.

La x que tenemos aquí es la x entre las 26 letras inglesas. Debido a algunas peculiaridades de su forma, esta letra pequeña y discreta es un concepto muy importante en CSS.

Por ejemplo, la definición de línea base línea base es:

El borde inferior (línea) de la letra x es nuestra línea base.

El medio en vertical-align se refiere a:

Alineación con respecto a la altura x de 1/2 hacia arriba desde la línea base

Y la altura de x incluso se usa como unidad de tamaño, esta unidad es ex, que se refiere a la altura de la letra minúscula x.

En el libro "CSS World", Zhang Xinxu divide los valores de los atributos de alineación vertical en 4 categorías:

Este método de división se basa en el tipo de valor del atributo. En el uso real, creo que este método de división no es lo suficientemente razonable. Por ejemplo, la línea base y el medio en la clase de línea se ven afectados por el tamaño de fuente del elemento, mientras que la parte superior e inferior se ven afectadas por la altura de línea del elemento; es decir, la línea base y el medio son textos de subelementos. El área está alineada con el área de texto del elemento principal. La parte superior e inferior son las áreas de contenido de los elementos secundarios que están alineadas con el área de contenido del elemento principal. elemento principal. Los diferentes valores de atributos de alineación vertical tienen diferentes atributos que afectan el efecto de alineación.

La figura anterior muestra el impacto de cambiar la altura de línea (área de contenido) del elemento secundario en la alineación. Además, dependiendo del valor del atributo de alineación vertical, el área de contenido y el área de texto de. El elemento secundario y el área de contenido del elemento principal y el área de texto tendrán un impacto en la alineación, y la configuración del porcentaje o el tamaño relativo estará directamente relacionada con las dos propiedades de tamaño de fuente y altura de línea. Se puede ver que la alineación vertical simple no es tan simple de usar de manera razonable.

Para comprender y utilizar correctamente line-height y vertical-align, primero debes aclarar los conceptos de área de contenido y área de texto:

En general, se puede considerar que el tamaño de fuente afecta el intervalo. El tamaño del contenido del intervalo es el área de texto, la altura de la línea afecta el div y el tamaño del contenido del div es el área de contenido. Cabe señalar aquí que el impacto no es simplemente el tamaño de fuente o el valor de altura de línea que determina la altura del área.

Como se muestra arriba, la altura real del elemento div es 43 en lugar de 40. Esto se debe a que el texto en el div tiene un área de contenido con un valor de altura ling de 40 px, y el intervalo también tiene un valor de altura de ling de 40 px Área de contenido, la altura de las dos áreas de contenido es igual, pero el valor predeterminado de alineación vertical es la línea de base, por lo que las dos están alineadas con el área de texto. Los tamaños de las áreas de texto son diferentes. , es decir, las ubicaciones de la línea base son diferentes. Conecte los dos rectángulos con la misma altura y las interfaces no están en la misma posición, por lo que, naturalmente, los dos no se pueden alinear. Si el elemento principal contiene estos dos elementos, la altura no se puede alinear. sólo 40px. El div contiene imágenes y la parte inferior está en blanco por este motivo. La parte inferior de la imagen es la línea de base y hay nodos fantasma en el div. Los dos están alineados según la línea de base, lo que da como resultado un fondo en blanco.