0:00:00.266,0:00:03.998
Usamos DIVs geralmente para[br]dividir nossa página

0:00:04.017,0:00:07.498
em caixas diferentes, redimensioná-las [br]e movê-las.

0:00:07.501,0:00:10.475
Isso ajuda o designer decidir[br]como quer o layout

0:00:10.495,0:00:12.399
se ficou como desejado.

0:00:12.409,0:00:16.014
Por hora, vamos ignorar o objetivo[br]de deixar a página bonita

0:00:16.014,0:00:18.681
e apenas ver como mudar as coisas.

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

0:00:21.912,0:00:25.619
Por padrão, uma div tem 100% da [br]largura disponível

0:00:25.768,0:00:29.054
Por isso a caixa cinza usa toda a página.

0:00:29.242,0:00:32.475
Mas talvez eu queira somente[br]300 px.

0:00:32.715,0:00:36.700
Vou adicionar outra propriedade CSS aqui:

0:00:36.700,0:00:39.893
width: 300px;

0:00:40.469,0:00:43.080
Funcionou, mas vamos fazer [br]algo diferente.

0:00:43.080,0:00:45.387
Vamos usar largura percentual,

0:00:45.387,0:00:50.290
e dizer que esta div terá 70% [br]da largura disponível.

0:00:50.290,0:00:53.326
Agora o texto ficará dentro[br]desta caixa pequena,

0:00:53.326,0:00:55.233
e a DIV ficou mais alta.

0:00:55.429,0:00:59.136
Podemos limitar também a altura da caixa

0:00:59.136,0:01:00.584
com a propriedade height:

0:01:01.028,0:01:03.231
height: 180px;

0:01:03.778,0:01:06.582
Algo interessante aconteceu.

0:01:06.807,0:01:09.642
A caixa cinza ficou com 180 pixels,

0:01:09.642,0:01:13.425
Mas o texto passou[br]o limite da caixa cinza.

0:01:13.671,0:01:15.507
Por que isso aconteceu?

0:01:15.794,0:01:19.888
Por causa da propriedade [br]chamada "overflow"

0:01:20.335,0:01:23.893
O valor padrão para 'overflow'[br]é 'visible',

0:01:23.893,0:01:28.809
fazendo com que o elemento redimensione,[br]mas o conteúdo passe por fora dele,

0:01:28.809,0:01:30.118
ficando meio estranho.

0:01:30.455,0:01:32.955
Quais opções temos para overflow?

0:01:33.491,0:01:36.489
Bem, podemos tentar 'hidden'.

0:01:36.984,0:01:40.038
Isso cortou o conteúdo, [br]limitando ele na borda

0:01:40.038,0:01:42.095
Que não é bem o que queremos,

0:01:42.095,0:01:45.824
porque nossos usuários não [br]conseguirão ler toda informação

0:01:46.287,0:01:48.771
Nós podemos também tentar 'auto',

0:01:49.107,0:01:52.896
que diz ao navegador para adicionar [br]barra de rolagem se necessário

0:01:53.078,0:01:57.062
Agora eu posso rolar o texto dentro [br]da caixa e vê-lo completo

0:01:57.070,0:01:59.475
Podemos também ser mais específicos:

0:01:59.475,0:02:02.712
definindo rolagem para cada direção.

0:02:02.787,0:02:04.177
Por exemplo, se quisermos

0:02:04.177,0:02:07.643
rolar na direção y, [br]para cima e para baixo,

0:02:07.643,0:02:10.509
apenas colocamos: [br]overflow-y: auto;

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

0:02:14.207,0:02:17.665
podemos colocar: [br]overflow-x: hidden;

0:02:18.380,0:02:21.419
Sempre tenha cuidado ao usar overflow,

0:02:21.419,0:02:24.434
porque rolagens podem ser irritantes [br]para o usuário.

0:02:24.599,0:02:27.215
Especialmente quando uma dentro de outra

0:02:27.215,0:02:28.829
se puder, evite-as.

0:02:29.529,0:02:33.974
Vamos voltar agora para largura e altura[br]Podemos usar largura e altura[br][br]

0:02:33.974,0:02:37.102
para todos os tipos de elementos,[br]como nossas imagens.

0:02:37.702,0:02:42.168
Agora que você conhece CSS, sabe que pode[br]usar as propriedades width/height

0:02:42.168,0:02:44.649
em vez de atributos width e height.

0:02:44.946,0:02:53.032
Vamos aumentar um pouco essa imagem [br]de gato adicionando um id, "cute-cat"

0:02:53.032,0:02:55.415
deletando o atributo,

0:02:55.415,0:03:00.396
e criando nossa regra de estilo, digamos:[br]#cute-cat {

0:03:00.396,0:03:03.128
width:120px;

0:03:03.585,0:03:06.328
Assim como antes nos atributos,

0:03:06.328,0:03:09.027
é melhor somente especificar[br]largura ou altura,

0:03:09.027,0:03:12.548
e deixar o navegador calcular o melhor[br]valor para a outra dimensão.

0:03:12.618,0:03:14.679
Do contrário, [br]teremos um gatinho esmagado!

0:03:14.743,0:03:18.877
Bem, isso parece impressionante, [br]vamos tentar por um segundo:[br]

0:03:18.877,0:03:19.791
height: 40px;

0:03:19.791,0:03:21.956
gato esmagado!!

0:03:22.059,0:03:24.037
Ok, ok, me diverti aqui.

0:03:24.037,0:03:28.793
Serei uma desenvolvedora web legal[br]e vou deletar isso agora.

0:03:29.009,0:03:30.689
Quanto mais conhecimento você tem,

0:03:30.689,0:03:33.077
maiores serão suas responsabilidades.

0:03:33.238,0:03:36.070
Só porque você pode adicionar[br]barra de rolagem em tudo

0:03:36.070,0:03:39.400
e esmagar todos os gatinhos[br]não quer dizer que você vai fazer.

0:03:39.497,0:03:42.578
Geralmente você está fazendo[br]sites para outras pessoas usarem,

0:03:42.578,0:03:47.338
e o que você acha interessante pode[br]ser difícil para outra pessoa usar.

0:03:47.566,0:03:52.323
Mas se você fizer coisas legais aqui no[br]Khan Academy, eu não vou me importar.

0:03:52.488,0:03:58.068
Legendado por [Paulo Trentin][br]Revisado por [Cainã Perri]