Demonstração Prática de Dimensões em CSS

Este arquivo demonstra as propriedades de dimensão (height, width) e limitação (min/max-width, min/max-height, overflow) conforme ensinado na aula. Tente redimensionar a janela do navegador para ver os limites de largura em ação.

1. height e width (Fixas e em %)

A caixa abaixo tem height: 100px; e width: 50%; da largura deste container.

Altura Fixa (100px) | Largura 50%

2. min-width e max-width (Responsividade)

Tente diminuir a largura da janela: a caixa não encolherá abaixo de 300px (min-width). Tente aumentar: ela não passará de 600px (max-width).

Largura: 80% | Min: 300px | Max: 600px

3. max-height e overflow: auto

A caixa está limitada a max-height: 100px;. O conteúdo transborda, mas overflow: auto; adiciona uma barra de rolagem.

Conteúdo da caixa com limite de altura. O texto é intencionalmente longo para forçar o transbordamento. O overflow: auto; garante que você possa rolar para ler o texto restante, mantendo a caixa principal com o tamanho máximo definido de 100px. Isso é muito comum em painéis de log ou caixas de comentários.

Mais texto de exemplo para garantir a rolagem.

4. min-height

Esta caixa garante uma altura mínima de 150px, mesmo que o conteúdo seja pequeno.

Altura Mínima: 150px.

Conteúdo pequeno, mas a altura da caixa se expande para 150px.