CSS | Propiedades Height y Width : Aquí, vamos a aprender acerca de la altura y propiedades de ancho en el CSS .
El altura y anchura propiedades que permiten a conjunto la altura y las propiedades de ancho de un elemento .
altura y anchura propiedades son cruciales class cualquier sitio web, ya que ayuda en la toma de los sitios web más eficiente con el espacio y, además añade más a los estilos del sitio también.
La altura y propiedades de ancho hacen no class cualquier relleno , márgenes o fronteras en vez influyen en el relleno, márgenes y fronteras del elemento.
Sintaxis:
Element{
height: 200px/60%
width: 200px/70%
}
Ejemplo:
<!DOCTYPE html>
<title>heading</title>
<style>
div {
height: 200px;
width: 60%;
background-color: lightblue;
}
</style>
<div>
The div has height and weight property.
</div>
salida
El div tiene altura y peso propiedad.
La altura y la anchura pueden tener el siguiente conjunto de valores:
- auto – Este es un valor class. El propio navegador calcula la altura y la anchura
- longitud -Es ayuda en la definición de la altura / anchura en px, cm, etc
- % – Ayuda en la definición de la altura / anchura en porcentaje del bloque de contención
- inicial – Esto ajusta la altura / anchura a su valor for
- hereda – la altura y la anchura se heredan de su valor padre
Ajuste de la anchura de max y max-height :
el max-anchura y max-height propiedades se utilizan para establecer la anchura máxima y la altura de un elemento.
Las propiedades se pueden especificar en px, cm o por ciento.
Usando ancho máximo y max-height el navegador con pequeñas ventanas puede ser manejado más cuidadosamente.
Ejemplo:
<!DOCTYPE html>
<title>heading</title>
<style>
div {
max-height: 100px;
max-width: 95px;
background-color: green;
}
</style>
<div>
The div has 'max-height' and 'max-width' applied.
</div>
de salida:
El div tiene ‘max-height’ y ‘max-width’ aplicado.
Ajuste de la min-width y min-altura
Esto ayuda en limitar la anchura y la altura de un elemento a un valor mínimo.
Ejemplo:
<!DOCTYPE html>
<title>heading</title>
<style>
div {
min-height: 390px;
min-width: 95px;
background-color: red;
}
</style>
<div>
The div has 'min-height' and 'min-width' applied.
</div>
salida
El div tiene ‘min-height’ y ‘min-width’ aplicado.
Algunas propiedades de dimensión CSS
| altura | Establece la altura de un elemento |
| min-altura | Establece la altura mínima de un elemento |
| max-height | Establece la altura máxima de un elemento |
| anchura | Establece la anchura de una elemento |
| max-anchura | Establece el ancho máximo de un elemento |
| min-width | Establece el ancho mínimo de un elemento |