Web.CSS.Ancho y Alto.
Estas propiedades ya se han usado en HTML, lo que es bastante lógico que también se puedan usar en CSS.
Sirven para especificar el ancho y alto de un elemento HTML. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Ancho y alto</h2>
<div></div>
</body>
</html>En este ejemplo se crea un bloque <div> con un estilo determinado y con un alto de 100 píxeles y un ancho del 500 píxeles .
Ancho máximo.
En el ejemplo anterior, tiene el pequeño inconveniente si resulta que el ancho de la página es menor de 500 píxeles. El resultado es que saldrá un pequeña barra de desplazamiento para poder ver el resto del elemento. Para mejorar esta situación se puede usar la propiedad max-width.
Lo que ocurre con esta instrucción es que le da un ancho máximo al elemento, de forma que si el navegador es más pequeño de 500 píxeles, evita que salga ese barra de desplazamiento adaptando automáticamente el elemento, a no ser que se muy muy pequeño entonces será inevitable que salga tal barra. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Ancho máximo</h2>
<div></div>
</body>
</html>Existen otros elementos que se pueden usar:
- max-height. Alto máximo.
- max-width. Ancho máximo.
- min-height. Alto mínimo.
- min-width. Ancho mínimo.
