0:00:00.266,0:00:03.858
Cuando usamos "´s", con frecuencia es porque queremos dividir nuestra página

0:00:03.858,0:00:07.577
en varios cuadros, cambiar el tamaño de esos cuadros y moverlos.

0:00:07.737,0:00:11.565
Se necesita un buen ojo para decidir cómo diseñar una página exactamente,

0:00:11.565,0:00:12.719
para que se vea bien.

0:00:12.767,0:00:16.484
Pero ahora, vamos a ignorar el objetivo de que una página se vea bien

0:00:16.484,0:00:18.701
y sólo vamos a mostrar cómo cambiar las cosas.

0:00:18.841,0:00:21.882
Vamos a cambiar el tamaño del bloque "official-info".

0:00:21.948,0:00:25.539
Por defecto, un etiqueta "" ocupa el 100 por ciento del espacio disponible a lo ancho.

0:00:25.768,0:00:29.244
Es por eso que vemos que el cuadro gris se extiende a lo ancho de toda la pantalla.

0:00:29.244,0:00:32.475
Pero tal vez sólo quiero que ocupe 300 pixeles.

0:00:32.715,0:00:36.700
Bueno, voy a agregar otra propiedad a la regla CSS que está aquí arriba:

0:00:36.700,0:00:39.373
"width: 300px;".

0:00:40.179,0:00:43.374
Eso funciona, pero vamos a hacer algo más interesante.

0:00:43.380,0:00:44.967
Vamos a usar un porcentaje de anchura,

0:00:44.967,0:00:50.110
y digamos que el bloque definido con "" siempre va a ocupar el 70 por ciento de la anchura disponible.

0:00:50.287,0:00:53.326
Ahora el texto está limitado a este cuadro más pequeño,

0:00:53.326,0:00:55.233
y lo que está en "" se hizo más alto.

0:00:55.429,0:00:59.136
Si queremos, en realidad también podemos limitar la altura del cuadro,

0:00:59.136,0:01:00.864
con la propiedad "height",

0:01:00.948,0:01:03.231
"height: 180px;".

0:01:03.778,0:01:06.582
Mmm, ok. Sucedió algo curioso.

0:01:06.807,0:01:09.642
El cuadro gris cambió su tamaño a 180 pixeles,

0:01:09.642,0:01:13.425
pero el texto se desborda fuera del cuadro gris.

0:01:13.671,0:01:15.507
¿Por qué pasa eso?

0:01:15.794,0:01:20.338
Es por una propiedad que llamamos "overflow".

0:01:20.338,0:01:23.893
El valor predeterminado para "overflow" es "visible",

0:01:23.893,0:01:28.309
lo que significa que el elemento cambia de tamaño pero el contenido se desborda por fuera,

0:01:28.309,0:01:30.118
lo que se ve un poco raro.

0:01:30.455,0:01:32.955
¿Qué otras opciones tenemos para la propiedad "overflow"?

0:01:33.491,0:01:36.489
Bueno, podemos probar con "hidden".

0:01:36.854,0:01:40.244
Esto reduce el contenido desbordado, lo recorta en el borde.

0:01:40.244,0:01:42.095
Eso no es lo que queremos, porque sino los

0:01:42.095,0:01:45.824
usuarios no podrán leer la asombrosa información oficial.

0:01:46.287,0:01:48.981
Podríamos probar con "auto",

0:01:49.107,0:01:53.066
que le dice al navegador que agregue barras de desplazamiento, si el contenido se desborda.

0:01:53.078,0:01:56.692
Ahora puedo desplazarme dentro del cuadro para ver todo el texto.

0:01:57.070,0:01:59.475
Si queremos podemos ser aún más específicos:

0:01:59.475,0:02:02.712
podemos especificar diferentes propiedades de desbordamiento para cada dirección.

0:02:02.787,0:02:04.177
Por ejemplo, si queremos

0:02:04.177,0:02:07.643
un desbordamiento con barras de desplazamiento en la dirección "y", hacia arriba y hacia abajo,

0:02:07.643,0:02:10.509
sólo escribimos:[br]"overflow-y: auto;",

0:02:10.832,0:02:14.207
pero luego si queremos recortar el contenido en la dirección "x",

0:02:14.207,0:02:17.325
podemos decir: "overflow-x: hidden;".

0:02:18.450,0:02:21.419
Sean cuidadosos cuando usen "overflow",

0:02:21.419,0:02:24.644
porque las barras de desplazamiento pueden se molestas para los usuarios.

0:02:24.644,0:02:27.215
Especialmente las barras de desplazamiento sin barras de desplazamiento...

0:02:27.215,0:02:29.149
evítenlas si pueden.

0:02:29.939,0:02:33.974
Ahora, regresando al "width/height" (ancho y alto), en realidad podemos usar "width" y "height"

0:02:33.974,0:02:37.402
para todo tipo de elementos, como nuestras imágenes.

0:02:37.702,0:02:42.168
Ahora que ya conoces CSS, puedes usar las propiedades "width" y "height" de CSS,

0:02:42.168,0:02:44.649
en lugar de los atributos "width" y "height".

0:02:44.946,0:02:52.542
Déjenme hacer esta imagen del gato un poco más grande, definiendo un id: "cute-cat",

0:02:52.542,0:02:55.415
borrando el atributo,

0:02:55.415,0:03:00.396
y arriba en la regla de estilo, escribo: "#cute-cat {"

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

0:03:03.585,0:03:06.328
Igual que antes con los atributos,

0:03:06.328,0:03:09.027
es mejor sólo especificar el ancho o el alto,

0:03:09.027,0:03:12.548
y dejar que el navegador ajuste la otra dimensión con el valor más adecuado.

0:03:12.618,0:03:14.679
De lo contrario, ¡vamos a tener un gatito aplastado!

0:03:14.743,0:03:18.547
Bueno, ok, eso suena asombroso, vamos a tratar de hacerlo por un momento:

0:03:18.547,0:03:19.781
"height: 40px;"

0:03:19.781,0:03:21.726
Ajá, ¡gatito aplastado, yay!

0:03:22.059,0:03:25.003
Ok, ok. No me pude resistir.

0:03:25.077,0:03:28.793
Seré una desarrolladora responsable y voy a borrar eso ahora.

0:03:29.009,0:03:30.689
Entre más conocimiento se tiene,

0:03:30.689,0:03:33.077
es necesario asumir mayor responsabilidad.

0:03:33.238,0:03:36.070
No sólo porque puedas poner barras de desplazamiento en todos lados,

0:03:36.070,0:03:39.400
y aplastar gatitos, significa que debas hacerlo.

0:03:39.497,0:03:42.578
Debido a que generalmente hacemos páginas web para que otras personas las usen,

0:03:42.578,0:03:47.338
lo que pienses que es divertido podría ser muy difícil de usar para otros.

0:03:47.583,0:03:52.853
Pero si haces algunas cosas divertidas aquí en Khan Academy, entonces no importa.