Propiedad de altura en CSS explicada
Como la altura es una de las acciones más cercanas al relleno, el borde y los márgenes. Sin embargo, ni los afectan ni obtiene efecto por ellos. Esta guía descriptiva proporciona el trabajo y el uso de la propiedad de altura en CSS con los siguientes resultados de aprendizaje:
- Trabajo de la propiedad de altura en CSS
- Uso de propiedad de altura en CSS
- la diferencia entre la altura y la altura máxima/min-altura
¿Cómo funciona la propiedad de altura en CSS?
El funcionamiento de la propiedad de altura en CSS depende de la sintaxis que se proporciona a continuación:
selector altura: valor;El selector puede ser cualquier elemento o puede referirse a la clase CSS en la hoja de estilo. El valor de la altura se puede establecer en varias unidades de medición establecidas a continuación;
Longitud: La longitud (longitud vertical) se puede definir en unidades como PX, EM, etc. El PX es el valor estático, mientras que el EM varía según el valor predeterminado del elemento principal. Como si la altura del cuerpo se establezca en 20px (como una altura predeterminada), entonces sería equivalente a 1em.
Auto: este valor ajusta la altura de acuerdo con la configuración predeterminada del navegador
Porcentaje (%): el porcentaje del elemento principal se toma como referencia. Por ejemplo, el valor del 50% ajustaría la altura al 50% (según la altura del elemento principal.)
Inicial: esto usa el valor de altura predeterminado
Heredar: este valor obtiene la altura del elemento principal
El funcionamiento de la propiedad de altura en CSS depende principalmente de la unidad de medición que se utiliza.
Cómo usar la propiedad de altura en CSS
Esta sección proporciona varios ejemplos que demuestran la funcionalidad de la propiedad de altura en CSS.
Ejemplo 1: Uso de la longitud/porcentaje de propiedad de altura
Este ejemplo usa el valor de longitud con varias unidades de medición y el siguiente código se practica a este respecto.
Ajustar la altura (usando la longitud y el porcentaje)
La altura está en PX
La altura está en porcentaje (%)
Altura en Em
La descripción del código se proporciona a continuación:
- Creó tres clases de CC llamadas "Prim", "Sec" y "Ter"
- La clase "Prim" considera la altura en "PX", mientras que las clases "SEC" y "TER" hacen uso de "%" y "EM" para la longitud de altura (vertical)
- Las tres clases de CSS se usan en tres párrafos (que se crean en el cuerpo)
La imagen del código de arriba se muestra a continuación,
Producción:
Ejemplo 2: Uso de los valores automáticos, heredados y iniciales de la propiedad de altura
Este ejemplo practica los valores automáticos, heredados y iniciales de la propiedad de altura en CSS. Para hacerlo, se practica el código que se proporciona a continuación
Ajuste de la altura
La altura se establece en el valor inicial
Se está heredando la altura
Altura en auto
La descripción del código se indica a continuación:
- Se crea un elemento CSS para "div" (ya que se utilizaría como elemento principal)
- Se usan tres clases de CSS "ini", "inh" y "aut" que se utilizarían para valores de altura (inicial, heredado y automático)
- Un párrafo usa la clase "INI", mientras que el párrafo que usa la clase "Inh" está contenida dentro de un DIV y el tercer párrafo utiliza la clase CSS "AUT"
La imagen del código de arriba se muestra a continuación
Producción:
Ejemplo 3: Uso de la altura con Max-Alcecio y Min-Altagia
Diferenciamos el funcionamiento de la propiedad de altura de las propiedades Max-Hight/Min-Height utilizando el código escrito a continuación.
Ajuste de la altura
Altura con máxima altura
Altura con min-altura
La descripción del código es
- Se crean dos clases de CSS llamadas "Hx" y "HN"
- La clase "HX" contiene las propiedades "Altura" y "Max-Al-Alta"
- La clase "HN" considera las propiedades "Min-Al-Alta" y "Altura"
- La clase "HX" se asocia con el primer párrafo, mientras que la clase "HN" se usa en el segundo párrafo.
La imagen del código se proporciona a continuación
Producción:
Se observa a partir de la salida que la propiedad Max-Alcecio dominó la propiedad de altura y la propiedad Min-Al-Alta dominaron la propiedad de altura.
Al pasar por los ejemplos, hemos proporcionado la funcionalidad de la propiedad de altura y también describimos su comportamiento al usarlo con las propiedades máximas/min-altura.
Conclusión
La propiedad de altura en CSS ajusta la altura (longitud vertical) del elemento. Este artículo proporciona el trabajo y el uso de la propiedad de altura en CSS. La propiedad de altura no se ve afectada por el borde/margen/relleno, pero puede estar influenciada por la propiedad máxima de altura y algodón mínimo de CSS. Hemos proporcionado pocos ejemplos que usan la altura con Min-Weight/Max-Hieight, y se concluye que la propiedad de altura debe usarse sola (no con Max-Weight/Min-Weight).