WEBVTT

00:00:00.266 --> 00:00:03.998
Usamos DIVs geralmente para
dividir nossa página

00:00:04.017 --> 00:00:07.498
em caixas diferentes, redimensioná-las 
e movê-las.

00:00:07.501 --> 00:00:10.475
Isso ajuda o designer decidir
como quer o layout

00:00:10.495 --> 00:00:12.399
se ficou como desejado.

00:00:12.409 --> 00:00:16.014
Por hora, vamos ignorar o objetivo
de deixar a página bonita

00:00:16.014 --> 00:00:18.681
e apenas ver como mudar as coisas.

00:00:18.681 --> 00:00:21.912
Vamos redimensionar a DIV "official-info"

00:00:21.912 --> 00:00:25.619
Por padrão, uma div tem 100% da 
largura disponível

00:00:25.768 --> 00:00:29.054
Por isso a caixa cinza usa toda a página.

00:00:29.242 --> 00:00:32.475
Mas talvez eu queira somente
300 px.

00:00:32.715 --> 00:00:36.700
Vou adicionar outra propriedade CSS aqui:

00:00:36.700 --> 00:00:39.893
width: 300px;

00:00:40.469 --> 00:00:43.080
Funcionou, mas vamos fazer 
algo diferente.

00:00:43.080 --> 00:00:45.387
Vamos usar largura percentual,

00:00:45.387 --> 00:00:50.290
e dizer que esta div terá 70% 
da largura disponível.

00:00:50.290 --> 00:00:53.326
Agora o texto ficará dentro
desta caixa pequena,

00:00:53.326 --> 00:00:55.233
e a DIV ficou mais alta.

00:00:55.429 --> 00:00:59.136
Podemos limitar também a altura da caixa

00:00:59.136 --> 00:01:00.584
com a propriedade height:

00:01:01.028 --> 00:01:03.231
height: 180px;

00:01:03.778 --> 00:01:06.582
Algo interessante aconteceu.

00:01:06.807 --> 00:01:09.642
A caixa cinza ficou com 180 pixels,

00:01:09.642 --> 00:01:13.425
Mas o texto passou
o limite da caixa cinza.

00:01:13.671 --> 00:01:15.507
Por que isso aconteceu?

00:01:15.794 --> 00:01:19.888
Por causa da propriedade 
chamada "overflow"

00:01:20.335 --> 00:01:23.893
O valor padrão para 'overflow'
é 'visible',

00:01:23.893 --> 00:01:28.809
fazendo com que o elemento redimensione,
mas o conteúdo passe por fora dele,

00:01:28.809 --> 00:01:30.118
ficando meio estranho.

00:01:30.455 --> 00:01:32.955
Quais opções temos para overflow?

00:01:33.491 --> 00:01:36.489
Bem, podemos tentar 'hidden'.

00:01:36.984 --> 00:01:40.038
Isso cortou o conteúdo, 
limitando ele na borda

00:01:40.038 --> 00:01:42.095
Que não é bem o que queremos,

00:01:42.095 --> 00:01:45.824
porque nossos usuários não 
conseguirão ler toda informação

00:01:46.287 --> 00:01:48.771
Nós podemos também tentar 'auto',

00:01:49.107 --> 00:01:52.896
que diz ao navegador para adicionar 
barra de rolagem se necessário

00:01:53.078 --> 00:01:57.062
Agora eu posso rolar o texto dentro 
da caixa e vê-lo completo

00:01:57.070 --> 00:01:59.475
Podemos também ser mais específicos:

00:01:59.475 --> 00:02:02.712
definindo rolagem para cada direção.

00:02:02.787 --> 00:02:04.177
Por exemplo, se quisermos

00:02:04.177 --> 00:02:07.643
rolar na direção y, 
para cima e para baixo,

00:02:07.643 --> 00:02:10.509
apenas colocamos: 
overflow-y: auto;

00:02:10.832 --> 00:02:14.207
mas então, limitá-lo na direção x,

00:02:14.207 --> 00:02:17.665
podemos colocar: 
overflow-x: hidden;

00:02:18.380 --> 00:02:21.419
Sempre tenha cuidado ao usar overflow,

00:02:21.419 --> 00:02:24.434
porque rolagens podem ser irritantes 
para o usuário.

00:02:24.599 --> 00:02:27.215
Especialmente quando uma dentro de outra

00:02:27.215 --> 00:02:28.829
se puder, evite-as.

00:02:29.529 --> 00:02:33.974
Vamos voltar agora para largura e altura
Podemos usar largura e altura



00:02:33.974 --> 00:02:37.102
para todos os tipos de elementos,
como nossas imagens.

00:02:37.702 --> 00:02:42.168
Agora que você conhece CSS, sabe que pode
usar as propriedades width/height

00:02:42.168 --> 00:02:44.649
em vez de atributos width e height.

00:02:44.946 --> 00:02:53.032
Vamos aumentar um pouco essa imagem 
de gato adicionando um id, "cute-cat"

00:02:53.032 --> 00:02:55.415
deletando o atributo,

00:02:55.415 --> 00:03:00.396
e criando nossa regra de estilo, digamos:
#cute-cat {

00:03:00.396 --> 00:03:03.128
width:120px;

00:03:03.585 --> 00:03:06.328
Assim como antes nos atributos,

00:03:06.328 --> 00:03:09.027
é melhor somente especificar
largura ou altura,

00:03:09.027 --> 00:03:12.548
e deixar o navegador calcular o melhor
valor para a outra dimensão.

00:03:12.618 --> 00:03:14.679
Do contrário, 
teremos um gatinho esmagado!

00:03:14.743 --> 00:03:18.877
Bem, isso parece impressionante, 
vamos tentar por um segundo:


00:03:18.877 --> 00:03:19.791
height: 40px;

00:03:19.791 --> 00:03:21.956
gato esmagado!!

00:03:22.059 --> 00:03:24.037
Ok, ok, me diverti aqui.

00:03:24.037 --> 00:03:28.793
Serei uma desenvolvedora web legal
e vou deletar isso agora.

00:03:29.009 --> 00:03:30.689
Quanto mais conhecimento você tem,

00:03:30.689 --> 00:03:33.077
maiores serão suas responsabilidades.

00:03:33.238 --> 00:03:36.070
Só porque você pode adicionar
barra de rolagem em tudo

00:03:36.070 --> 00:03:39.400
e esmagar todos os gatinhos
não quer dizer que você vai fazer.

00:03:39.497 --> 00:03:42.578
Geralmente você está fazendo
sites para outras pessoas usarem,

00:03:42.578 --> 00:03:47.338
e o que você acha interessante pode
ser difícil para outra pessoa usar.

00:03:47.566 --> 00:03:52.323
Mas se você fizer coisas legais aqui no
Khan Academy, eu não vou me importar.

00:03:52.488 --> 00:03:58.068
Legendado por [Paulo Trentin]
Revisado por [Cainã Perri]