1
00:00:00,266 --> 00:00:03,998
Usamos DIVs geralmente para
dividir nossa página

2
00:00:04,017 --> 00:00:07,498
em caixas diferentes, redimensioná-las 
e movê-las.

3
00:00:07,501 --> 00:00:10,475
Isso ajuda o designer decidir
como quer o layout

4
00:00:10,495 --> 00:00:12,399
se ficou como desejado.

5
00:00:12,409 --> 00:00:16,014
Por hora, vamos ignorar o objetivo
de deixar a página bonita

6
00:00:16,014 --> 00:00:18,681
e apenas ver como mudar as coisas.

7
00:00:18,681 --> 00:00:21,912
Vamos redimensionar a DIV "official-info"

8
00:00:21,912 --> 00:00:25,619
Por padrão, uma div tem 100% da 
largura disponível

9
00:00:25,768 --> 00:00:29,054
Por isso a caixa cinza usa toda a página.

10
00:00:29,242 --> 00:00:32,475
Mas talvez eu queira somente
300 px.

11
00:00:32,715 --> 00:00:36,700
Vou adicionar outra propriedade CSS aqui:

12
00:00:36,700 --> 00:00:39,893
width: 300px;

13
00:00:40,469 --> 00:00:43,080
Funcionou, mas vamos fazer 
algo diferente.

14
00:00:43,080 --> 00:00:45,387
Vamos usar largura percentual,

15
00:00:45,387 --> 00:00:50,290
e dizer que esta div terá 70% 
da largura disponível.

16
00:00:50,290 --> 00:00:53,326
Agora o texto ficará dentro
desta caixa pequena,

17
00:00:53,326 --> 00:00:55,233
e a DIV ficou mais alta.

18
00:00:55,429 --> 00:00:59,136
Podemos limitar também a altura da caixa

19
00:00:59,136 --> 00:01:00,584
com a propriedade height:

20
00:01:01,028 --> 00:01:03,231
height: 180px;

21
00:01:03,778 --> 00:01:06,582
Algo interessante aconteceu.

22
00:01:06,807 --> 00:01:09,642
A caixa cinza ficou com 180 pixels,

23
00:01:09,642 --> 00:01:13,425
Mas o texto passou
o limite da caixa cinza.

24
00:01:13,671 --> 00:01:15,507
Por que isso aconteceu?

25
00:01:15,794 --> 00:01:19,888
Por causa da propriedade 
chamada "overflow"

26
00:01:20,335 --> 00:01:23,893
O valor padrão para 'overflow'
é 'visible',

27
00:01:23,893 --> 00:01:28,809
fazendo com que o elemento redimensione,
mas o conteúdo passe por fora dele,

28
00:01:28,809 --> 00:01:30,118
ficando meio estranho.

29
00:01:30,455 --> 00:01:32,955
Quais opções temos para overflow?

30
00:01:33,491 --> 00:01:36,489
Bem, podemos tentar 'hidden'.

31
00:01:36,984 --> 00:01:40,038
Isso cortou o conteúdo, 
limitando ele na borda

32
00:01:40,038 --> 00:01:42,095
Que não é bem o que queremos,

33
00:01:42,095 --> 00:01:45,824
porque nossos usuários não 
conseguirão ler toda informação

34
00:01:46,287 --> 00:01:48,771
Nós podemos também tentar 'auto',

35
00:01:49,107 --> 00:01:52,896
que diz ao navegador para adicionar 
barra de rolagem se necessário

36
00:01:53,078 --> 00:01:57,062
Agora eu posso rolar o texto dentro 
da caixa e vê-lo completo

37
00:01:57,070 --> 00:01:59,475
Podemos também ser mais específicos:

38
00:01:59,475 --> 00:02:02,712
definindo rolagem para cada direção.

39
00:02:02,787 --> 00:02:04,177
Por exemplo, se quisermos

40
00:02:04,177 --> 00:02:07,643
rolar na direção y, 
para cima e para baixo,

41
00:02:07,643 --> 00:02:10,509
apenas colocamos: 
overflow-y: auto;

42
00:02:10,832 --> 00:02:14,207
mas então, limitá-lo na direção x,

43
00:02:14,207 --> 00:02:17,665
podemos colocar: 
overflow-x: hidden;

44
00:02:18,380 --> 00:02:21,419
Sempre tenha cuidado ao usar overflow,

45
00:02:21,419 --> 00:02:24,434
porque rolagens podem ser irritantes 
para o usuário.

46
00:02:24,599 --> 00:02:27,215
Especialmente quando uma dentro de outra

47
00:02:27,215 --> 00:02:28,829
se puder, evite-as.

48
00:02:29,529 --> 00:02:33,974
Vamos voltar agora para largura e altura
Podemos usar largura e altura



49
00:02:33,974 --> 00:02:37,102
para todos os tipos de elementos,
como nossas imagens.

50
00:02:37,702 --> 00:02:42,168
Agora que você conhece CSS, sabe que pode
usar as propriedades width/height

51
00:02:42,168 --> 00:02:44,649
em vez de atributos width e height.

52
00:02:44,946 --> 00:02:53,032
Vamos aumentar um pouco essa imagem 
de gato adicionando um id, "cute-cat"

53
00:02:53,032 --> 00:02:55,415
deletando o atributo,

54
00:02:55,415 --> 00:03:00,396
e criando nossa regra de estilo, digamos:
#cute-cat {

55
00:03:00,396 --> 00:03:03,128
width:120px;

56
00:03:03,585 --> 00:03:06,328
Assim como antes nos atributos,

57
00:03:06,328 --> 00:03:09,027
é melhor somente especificar
largura ou altura,

58
00:03:09,027 --> 00:03:12,548
e deixar o navegador calcular o melhor
valor para a outra dimensão.

59
00:03:12,618 --> 00:03:14,679
Do contrário, 
teremos um gatinho esmagado!

60
00:03:14,743 --> 00:03:18,877
Bem, isso parece impressionante, 
vamos tentar por um segundo:


61
00:03:18,877 --> 00:03:19,791
height: 40px;

62
00:03:19,791 --> 00:03:21,956
gato esmagado!!

63
00:03:22,059 --> 00:03:24,037
Ok, ok, me diverti aqui.

64
00:03:24,037 --> 00:03:28,793
Serei uma desenvolvedora web legal
e vou deletar isso agora.

65
00:03:29,009 --> 00:03:30,689
Quanto mais conhecimento você tem,

66
00:03:30,689 --> 00:03:33,077
maiores serão suas responsabilidades.

67
00:03:33,238 --> 00:03:36,070
Só porque você pode adicionar
barra de rolagem em tudo

68
00:03:36,070 --> 00:03:39,400
e esmagar todos os gatinhos
não quer dizer que você vai fazer.

69
00:03:39,497 --> 00:03:42,578
Geralmente você está fazendo
sites para outras pessoas usarem,

70
00:03:42,578 --> 00:03:47,338
e o que você acha interessante pode
ser difícil para outra pessoa usar.

71
00:03:47,566 --> 00:03:52,323
Mas se você fizer coisas legais aqui no
Khan Academy, eu não vou me importar.

72
00:03:52,488 --> 00:03:58,068
Legendado por [Paulo Trentin]
Revisado por [Cainã Perri]