Las propiedades de tamaño de CSS se refieren a las propiedades de ancho y alto de los elementos. Aunque es muy simple, es una habilidad que se debe dominar. CSS proporciona varios atributos como ancho, alto, ancho máximo, ancho mínimo, alto máximo y alto mínimo para establecer el ancho y el alto de los elementos. Estos elementos son muy simples de usar.
1.altura
(1) Establecer la altura del elemento: atributo de altura
Altura: Propiedad especifica la altura de un elemento.
① Ámbito y objetos de aplicación: Área de contenido predeterminada
Objetos aplicables: todos los elementos
elementos en línea no reemplazados, columnas de tabla, grupos de columnas
Ámbito de aplicación: de forma predeterminada, este atributo determina la altura del área de contenido.
② Cambiar el ámbito de aplicación:
Si el tamaño del cuadro se establece en cuadro de borde, esta propiedad determina la altura del área del borde.
③ No aplicable
Elementos en línea no reemplazados: este atributo se ignora.
Elementos en línea: no se puede establecer la altura.
④ Anulación del valor del atributo
Las propiedades de altura mínima y altura máxima anulan la altura.
(2) Alto nivel de gramática
altura: auto|longitud|%|heredar;
Contiene valores de atributos experimentales: [<longitud> | <porcentaje>] && [cuadro de borde] disponible | contenido máximo |
/*Valor de palabra claveValor de palabra clave*/height:auto;/*Valor de longitud<longitud>valores*/height:120px;height:10em;/*Valor de porcentaje<porcentaje>valor*/height:75%;/*Valor de palabra clave globalValores globales*/ altura:heredar;altura:inicial;altura:desarmado;
2.ancho
(1) Establecer el ancho del elemento: atributo de ancho
① Área aplicable
Área de contenido: de forma predeterminada, establece el ancho del área de contenido.
No incluido: puede agregar relleno, bordes y márgenes fuera del área de contenido.
Modifique el área aplicable: pero si el tamaño del cuadro se establece en border-box, establece el ancho del área del borde.
② Elementos aplicables
Todos los elementos excepto los siguientes elementos.
Elementos no aplicables: elementos en línea, filas de tabla y grupos de filas no reemplazados
Los elementos en línea no reemplazados ignorarán este atributo.
③ Cubierta
Las propiedades de ancho mínimo y ancho máximo pueden anular el ancho.
(2) Sintaxis de ancho
ancho: auto | largo| %| heredar;
Contiene valores de atributos experimentales: [<longitud> | <porcentaje>] && [cuadro de borde] disponible | contenido máximo |
/*Valor de longitud<longitud>valores*/width:300px;width:25em;/*Valor de porcentaje<percentage>valor*/width:75%;/*Valor de palabra clave Valores de palabra clave*/width:25emborder-box;width:75 % cuadro de contenido ;ancho:contenido máximo;ancho:contenido mínimo;ancho:disponible;ancho:contenido ajustado;ancho:auto;/*Valores globalesValores globales*/ancho:heredar;ancho:inicial;ancho:unset;
3. ancho máximo y alto máximo
Los atributos max-width y max-height se utilizan para establecer el ancho máximo y la altura máxima del área de contenido del elemento, respectivamente. Cuando se definen las propiedades de ancho máximo y alto máximo, los valores reales de las propiedades de ancho y alto serán menores o iguales a los valores de las propiedades de ancho máximo y alto máximo, independientemente de las propiedades reales. valores de las propiedades de ancho o alto. Los valores opcionales para las propiedades max-width y max-height son los siguientes:
Tome el atributo de ancho máximo como ejemplo: (las características del atributo de altura máxima son similares)
(1) Cuando el valor del atributo de ancho máximo es menor que el atributo de ancho, el valor del atributo de ancho se redefinirá al mismo valor que el atributo de ancho máximo;
(2) Cuando el valor del atributo de ancho máximo es mayor que el ancho, se ignorará el atributo de ancho máximo;
(3) Cuando el valor del atributo de ancho máximo es menor que el ancho mínimo, se ignorará el atributo de ancho máximo.
4.min-ancho y min-alto
Los atributos min-width y min-height se utilizan para establecer el ancho mínimo y la altura mínima del área de contenido del elemento. Cuando se definen los atributos min-width y min-height, independientemente del valor real del atributo ancho o alto, los atributos de ancho y alto Los valores reales serán mayores o iguales a los valores de las propiedades de ancho mínimo y alto mínimo. Los valores opcionales para las propiedades min-width y min-height son los siguientes:
Tome el atributo de ancho mínimo como ejemplo: (el atributo de altura mínima tiene características similares)
(1) Cuando el valor del atributo de ancho mínimo es menor que el ancho, se ignorará el atributo de ancho mínimo;
(2) Cuando el valor del atributo de ancho mínimo es mayor que el ancho, el valor del atributo de ancho mínimo se redefinirá al mismo valor que el atributo de ancho mínimo;
(3) Cuando el valor del atributo de ancho mínimo es mayor que el ancho máximo, se ignorará el atributo de ancho máximo.