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.
altura de la línea definiciónLa 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
el términoPara comprender la altura de la línea en profundidad, debe comprender los términos comunes sobre la altura de la línea.
Área de contenidoPara 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.
Marco en líneaEl á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
Cajas de líneaEl 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.
Propiedades de cajaEl 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 elementosReemplazar 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
alinear vertical definiciónEl 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.
CODE CODE CSS Copiar contenido al portapapeles