Altura, largura e largura máxima do CSS
Height e width são propriedades css para
definir altura e largura de um elemento.
max-width é a
propriedade para definir largura máxima de um elemnto.
Valores de altura e largura do CSS
Ø heighte width
tem seguintes valores:
Ø auto –
o navegador calcula altura e largura.
Ø Length - Define
a altura/largura em px, cm,..
Ø %- Define a altura/largura em porcentagem,
Ø initial- Define a
altura/largura para seu valor padrão
Ø inherit- A altura/largura será herdada de seu valor pai
Na prática:
<!DOCTYPE
html>
<html>
<head>
<style>
div {
height: 190px;
width: 60%;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Definir
a altura e a largura de um elemento</h2>
<div>Este
elemento div tem uma altura de 190px e uma largura de 60%.</div>
</body>
</html>
USANDO PX
<!DOCTYPE
html>
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Definir
a altura e a largura de um elemento</h2>
<div>Este
elemento div tem uma altura de 200px e uma largura de 400px.</div>
</body>
</html>
Configurando a largura máxima
A max-width propriedade é usada para definir a largura máxima
de um elemento.
Na prática
<!DOCTYPE
html>
<html>
<head>
<style>
div {
max-width: 400px;
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Definir
a largura máxima de um elemento</h2>
<div>Este
elemento div tem uma altura de 150px e uma largura máxima de 400px.</div>
<p>Redimensione
a janela do navegador para ver o efeito.</p>
</body>
</html>