Comprensión integral de la alineación de la línea de línea y vertical

Línea de altura de alquiler, tamaño de fuente y vertical son atributos clave para establecer el diseño de elementos dentro de la línea. Estos tres atributos son relaciones interdependientes, y cambiar la distancia entre filas y establecer alineaciones verticales requiere sus esfuerzos conjuntos. El contenido relevante del tamaño de fuente se ha introducido en detalle en las fuentes CSS. Este artículo introducirá principalmente en línea de alineación y alineación vertical.

La altura de la línea de altura de la línea se refiere a la distancia entre las líneas de base de la línea de texto. La altura de línea en realidad solo afecta los elementos en línea y otro contenido en línea, y no afecta directamente a los elementos de nivel de bloque. También puede establecer la altura de línea para un elemento a nivel de bloque, pero este valor solo tendrá un impacto cuando se aplique al contenido en línea de los elementos de nivel de bloque. Declarar la altura de la línea en un elemento a nivel de bloque establecerá una altura de caja de línea mínima para el contenido del elemento de nivel de bloque

Valor: <Longitud> | <porcentaje> | <Número> | Normal | heredar

Valor inicial: normal

Aplicado a: todos los elementos

Herencia: si

Porcentaje: tamaño de fuente en relación con el elemento

Para comprender la altura de la línea en profundidad, debe comprender los términos comunes sobre la altura de la línea.

Para elementos no reemplazados o parte del texto anónimo en la línea, el tamaño de la fuente y la familia de fuentes determinan la altura del área de contenido. En la fuente de la canción, si el tamaño de fuente de un elemento en una fila es de 15 px, la altura del área de contenido es 15px; En otras fuentes, la altura del área de contenido no es igual al tamaño de la fuente.

El área de contenido más el espacio de línea es igual al cuadro de línea en línea. Si el tamaño de fuente de un elemento no reemplazado en una fila es 15px y la altura de línea es de 21 px, entonces la diferencia es 6px. El agente de usuario divide estos 6 píxeles en dos y se aplica a la mitad en la parte superior e inferior del área de contenido, respectivamente, lo que proporciona la línea dentro de la caja.

Cuando la altura de línea es menor que el tamaño de la fuente, la caja de línea en línea es en realidad menor que el área de contenido

El cuadro de fila se define como la distancia entre la parte superior de la caja interna de la fila más alta en la fila y la parte inferior de la caja interna de la fila más baja, y la parte superior de cada cuadro de fila está al lado de la parte inferior de la caja de fila anterior.

El margen interno, el margen exterior y el borde no afectan la altura del marco de la línea, es decir, no afecta la altura de la línea.

La limitación del borde de los elementos en línea está controlada por el tamaño de la fuente en lugar de la altura de la línea

Los márgenes no se aplicarán a la parte superior e inferior de los elementos de no reemplazo en la fila

margen-izquierda, acolchado-izquierda, borde-izquierda se aplican al comienzo del elemento; margen derecho, acolchado derecho, fronterizo-derecha se aplican al final del elemento

Reemplazar elementos dentro de una fila requiere el uso de valores de algodón de línea para colocar correctamente elementos cuando se alinean verticalmente. Porque el valor porcentual del align vertical se calcula en relación con la altura de línea del elemento. Para la alineación vertical, la altura de la imagen en sí es irrelevante, la clave es el valor de la altura de la línea

Por defecto, el elemento de reemplazo en línea se encuentra en la línea de base. Si agrega margen interno, margen exterior o borde al elemento de reemplazo, el área de contenido se moverá hacia arriba. La línea de base del elemento de reemplazo es la línea de base de la última caja de fila en la corriente normal. A menos que el contenido del elemento de reemplazo esté vacío o el valor del atributo de desbordamiento en sí mismo no es visible, en este caso la línea de base es el margen del borde inferior

El align vertical se usa para establecer la alineación vertical, todos los elementos alineados verticalmente afectarán la altura de la fila.

Valor: línea de base | sub | super | arriba | Texto-top | Medio | parte inferior | TEXTO BOTAL | <Tong Longitud> | <porcentaje> | heredar

Valor inicial: línea de base

Aplicado a: elementos en línea, elementos de reemplazo, celdas de tabla

Herencia: ninguno

Porcentaje: altura de línea en relación con la altura de la línea de elementos

[Nota] El valor porcentual del alineado vertical en el navegador IE7 no admite la altura de la fila decimal, y el efecto de visualización es diferente del de los navegadores estándar al tomar la línea de base, la mitad, el fondo de texto, etc. La solución comúnmente utilizada es establecer la pantalla: bloqueo en línea en los elementos de línea.