Propiedad de ancho en CSS explicada
Esta guía descriptiva proporciona el trabajo y el uso de la propiedad de ancho en CSS. El funcionamiento de la propiedad de ancho se guía por la sintaxis que se está utilizando y se citan varios ejemplos para ilustrar el uso de la propiedad de ancho.
Cómo funciona la propiedad de ancho en CSS
El ancho de un elemento se puede establecer utilizando la sintaxis escrita a continuación.
selector ancho: valor;El selector puede ser cualquier elemento o puede referirse a la clase CSS en la hoja de estilo. El valor de ancho se puede establecer en varias unidades de medición establecidas a continuación:
- Longitud: el valor se define en PX, EM. El valor de EM varía según el tamaño predeterminado establecido para el elemento principal. Por ejemplo, si el tamaño predeterminado se establece en 15px, se contaría como 1EM y mantiene el valor predeterminado a 15px, el valor de tamaño 2EM sería equivalente a 30px.
- Auto: los navegadores ajustan el valor automáticamente
- Porcentaje ( %): el valor (en %) se asocia con el ancho del elemento principal. Por ejemplo, el valor del 50% ajustaría el ancho al 50% (del elemento principal o en el que está contenido el elemento dirigido).
- Heredar: el valor del ancho del elemento principal se obtiene
- Inicial: se usa el valor de ancho predeterminado
El funcionamiento de la propiedad de ancho en CSS depende principalmente de la unidad de medición que se utiliza.
Cómo usar la propiedad de ancho en CSS
Esta sección proporciona varios ejemplos que demuestran la funcionalidad de la propiedad de ancho en CSS.
Ejemplo 1: Uso de la propiedad de ancho con longitud/porcentaje
Este ejemplo explica el uso de la propiedad de ancho con varias medidas de longitud y porcentaje. El código presentado a continuación se refiere a este ejemplo:
Ajuste del ancho
Ancho en PX
Ancho en EM
Ancho en %
La descripción del código se proporciona a continuación:
- Se crean tres clases de CSS llamadas "PX '," EM "y" PER "
- El "PX", "EM" y "PER" usan PX, EM y % respectivamente para la medición de ancho
- Estas tres clases se usan en tres párrafos para demostrar su uso
La imagen del código se proporciona a continuación
Producción:
Ejemplo 2: Uso de ancho con valores iniciales, heredados y automáticos
Los valores iniciales, heredados y automáticos se utilizan en este ejemplo para alterar el ancho del elemento. Para hacerlo, se ejerce el siguiente código:
Ajustar el ancho con valores automáticos/iniciales/heredados
ancho inicial
ancho heredado
ancho de auto
El código se describe como
- Tres clases de CSS se llaman "inicial", "heredar" y "auto"
- Estas clases se utilizan en tres párrafos que representan los valores "iniciales", "heredar" y "auto" de ancho
- Se diseña un DIV con 50% de ancho y el color de fondo que se utilizaría como padre para un párrafo (que se usa con la clase CSS heredada)
La imagen del código se muestra a continuación
Producción:
A partir de la salida, se observa que el ancho del segundo párrafo se hereda del DIV (cuyo ancho es del 50%) y, por lo tanto, el párrafo se limitaría al 50% de su elemento principal (DIV).
Ejemplo 3: Uso de ancho con ancho máximo y mínimo de ancho
El ancho máximo y el mínimo de ancho define el límite superior e inferior del ancho respectivamente. Si la propiedad de ancho se usa con mínimo-ido/ancho máximo, entonces hay posibilidades de que el resultado no pueda ser el mismo según su requisito. El valor del ancho es posible comprometerse en una de las siguientes condiciones:
- Si el ancho < max-width then value of max-width will be used and
- Si el ancho < min-width then the width would be set according to the min-width value
Practiquemoslo usando el código escrito a continuación.
Uso de ancho con mínimo-oso y máximo ancho
Ancho con mínimo de ancho
Ancho con ancho máximo
La descripción del código se proporciona a continuación
- Se crean dos clases CSS llamada "Min" y "Max" que usa ancho con mínimo-oso y ancho con máximo ancho
- Los valores de ancho en las clases "Min" y "Máx" son del 25% y el 75% respectivamente, mientras que el Min-Width es del 75% y el ancho máximo es del 50%
- Estas clases de CSS se usan en dos párrafos
La imagen del editor de código se muestra a continuación:
Producción:
De la salida anterior, el ancho está influenciado por el ancho mínimo y el máximo de ancho. Por lo tanto, se sugiere que el ancho debe usarse por separado, de lo contrario, la propiedad puede dar lugar a una salida extraña.
Conclusión
La propiedad de ancho en CSS se usa para ajustar el ancho (longitud horizontal) del elemento. Hace conexión con el relleno, el borde y los márgenes de un elemento. Sin embargo, ni el ancho ni el acolchado/margen/frontera se afectan entre sí. Este artículo proporciona el trabajo y el uso de la propiedad de ancho en CSS. La propiedad de ancho puede estar influenciada por la propiedad máxima de altura y altura mínima de CSS. Por lo tanto, se recomienda utilizar la propiedad de ancho manteniendo el ancho máximo y el mínimo de ancho. Además, hemos demostrado ejemplos que usan el ancho y la propiedad máxima/mínima-oso en CSS.