Banner propaganda da DevMedia - Cursos de desenvolvimento web

As propriedades CSS width, min-width e max-width

visualizações (desde 02/06/2016) Publicado em: 04/06/2016

Definindo largura para os elementos HTML

As propriedades width, min-width e max-width se destinam a definir a largura dos boxes.

Valores válidos para a propriedades que definem larguras

  • comprimento: um valor CSS para comprimento (px, em, pt, etc)
  • porcentagem: um valor expressso em porcentagem;
  • auto: um valor que depende dos valores de outras propriedades;

O valor inicial (padrão) desta propriedade é auto. A largura inicial do box é igual à largura total do seu elemento-pai

Valores declarados com uso de porcentagem são calculados em relação à largura (width) do bloco de conteúdo (o elemento-pai do box).

Não é válido declarar valores negativos para width.

Na prática usam-se as propriedades min-width e max-width em conjunto com a propriedade width com a finalidade de estabelecer valores mínimo e máximo para uma largura definida em porcentagem.

width em px

...
<style rel="stylesheet">
  div { 
    width: 300px; 
    background: skyblue;
    }
</style>
</head>
<body>
  <div>Eu sou um elemento DIV com 300px de largura.</div>
</body>
</html>

A renderização do código acima é conforme mostrado a seguir:

Eu sou um elemento DIV com 300px de largura.

width em %

...
<style rel="stylesheet">
  div { 
    width: 70%; 
    background: skyblue;
    }
</style>
</head>
<body>
  <div>Eu sou um elemento DIV com 70% de largura.</div>
</body>
</html>

A renderização do código acima é conforme mostrado a seguir:

Eu sou um elemento DIV com 70% de largura.

width auto

...
<style rel="stylesheet">
  div { 
    width: auto; 
    background: skyblue;
    }
</style>
</head>
<body>
  <div>Eu sou um elemento DIV com largura de valor auto.</div>
</body>
</html>

A renderização do código acima é conforme mostrado a seguir:

Eu sou um elemento DIV com largura de valor auto.

max-width

...
<style rel="stylesheet">
  div { 
    width: 100%;
    max-width: 800px;
    margin: 0 auto;  
    background: skyblue;
    }
</style>
</head>
<body>
  <div>DIV</div>
</body>
</html>

A renderização do código acima é conforme mostrado a seguir:

DIV

Neste exemplo o elemento DIV se estenderá por toda a largura do seu elemento-pai até que a largura deste elemento atinga os 800px e a partir daí o DIV terá largura fixa de 800px e será centrado horizontalmente no seu elemento-pai.

Essa é uma técnica muito usada em design responsivo para fazer com que um box se estenda por toda a largura da viewport (em dispositivos com pequena largura) até que a viewport atinja uma determinada largura quando o box terá largura fixa mesmo com a viewport continuando a crescer em largura. Por exemplo: em dispositivos com largura de viewport até 1000px o layout do site (ou da aplicação) ocupará toda a largura da viewport e a partir daí o layout terá largura fixa de 1000px centrado horizontalmente na janela do navegador.

Para a propriedade min-width o comportamento é semelhante e aplica-se à largura mínima não permitindo que o DIV "contraia" mais que o valor declarado para a propriedade.

Nota: Para saber a diferença entre os valores width e auto consulte o tutorial Propriedade CSS width no design responsivo.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo