Usamos DIVs geralmente para dividir nossa página
em caixas diferentes, redimensioná-las e movê-las.
Isso ajuda o designer decidir como quer o layout
se ficou como desejado.
Por hora, vamos ignorar o objetivo de deixar a página bonita
e apenas ver como mudar as coisas.
Vamos redimensionar a DIV "official-info"
Por padrão, uma div tem 100% da largura disponível
Por isso a caixa cinza usa toda a página.
Mas talvez eu queira somente 300 px.
Vou adicionar outra propriedade CSS aqui:
width: 300px;
Funcionou, mas vamos fazer algo diferente.
Vamos usar largura percentual,
e dizer que esta div terá 70% da largura disponível.
Agora o texto ficará dentro desta caixa pequena,
e a DIV ficou mais alta.
Podemos limitar também a altura da caixa
com a propriedade height:
height: 180px;
Algo interessante aconteceu.
A caixa cinza ficou com 180 pixels,
Mas o texto passou o limite da caixa cinza.
Por que isso aconteceu?
Por causa da propriedade chamada "overflow"
O valor padrão para 'overflow' é 'visible',
fazendo com que o elemento redimensione, mas o conteúdo passe por fora dele,
ficando meio estranho.
Quais opções temos para overflow?
Bem, podemos tentar 'hidden'.
Isso cortou o conteúdo, limitando ele na borda
Que não é bem o que queremos,
porque nossos usuários não conseguirão ler toda informação
Nós podemos também tentar 'auto',
que diz ao navegador para adicionar barra de rolagem se necessário
Agora eu posso rolar o texto dentro da caixa e vê-lo completo
Podemos também ser mais específicos:
definindo rolagem para cada direção.
Por exemplo, se quisermos
rolar na direção y, para cima e para baixo,
apenas colocamos: overflow-y: auto;
mas então, limitá-lo na direção x,
podemos colocar: overflow-x: hidden;
Sempre tenha cuidado ao usar overflow,
porque rolagens podem ser irritantes para o usuário.
Especialmente quando uma dentro de outra
se puder, evite-as.
Vamos voltar agora para largura e altura Podemos usar largura e altura
para todos os tipos de elementos, como nossas imagens.
Agora que você conhece CSS, sabe que pode usar as propriedades width/height
em vez de atributos width e height.
Vamos aumentar um pouco essa imagem de gato adicionando um id, "cute-cat"
deletando o atributo,
e criando nossa regra de estilo, digamos: #cute-cat {
width:120px;
Assim como antes nos atributos,
é melhor somente especificar largura ou altura,
e deixar o navegador calcular o melhor valor para a outra dimensão.
Do contrário, teremos um gatinho esmagado!
Bem, isso parece impressionante, vamos tentar por um segundo:
height: 40px;
gato esmagado!!
Ok, ok, me diverti aqui.
Serei uma desenvolvedora web legal e vou deletar isso agora.
Quanto mais conhecimento você tem,
maiores serão suas responsabilidades.
Só porque você pode adicionar barra de rolagem em tudo
e esmagar todos os gatinhos não quer dizer que você vai fazer.
Geralmente você está fazendo sites para outras pessoas usarem,
e o que você acha interessante pode ser difícil para outra pessoa usar.
Mas se você fizer coisas legais aqui no Khan Academy, eu não vou me importar.
Legendado por [Paulo Trentin] Revisado por [Cainã Perri]