1
00:00:00,840 --> 00:00:06,090
Entonces, uno de los conceptos más importantes que tenemos que cubrir y evaluar es el posicionamiento de los elementos.

2
00:00:06,600 --> 00:00:10,290
Entonces, ¿cómo podemos diseñar una página o mover un div a la parte superior derecha?

3
00:00:10,410 --> 00:00:15,720
O cómo hacemos una etiqueta de anclaje más ancha o agregamos espaciado entre las imágenes.

4
00:00:15,780 --> 00:00:20,110
Todo eso es realmente importante y está relacionado con algo que se llama el modelo de caja.

5
00:00:20,220 --> 00:00:26,820
Entonces el modelo de caja es esta idea básica que es realmente central para todo lo que se evalúa en

6
00:00:26,820 --> 00:00:31,190
HD, que básicamente es que cada elemento tiene una caja rectangular a su alrededor.

7
00:00:31,680 --> 00:00:38,040
Entonces, podemos ver aquí solo ir a cualquier página web en MDA y tengo el inspector abierto y

8
00:00:38,040 --> 00:00:39,620
tengo la lupa seleccionada.

9
00:00:40,010 --> 00:00:44,810
Y al pasar el cursor sobre cada elemento, puede ver que hay una caja alrededor.

10
00:00:44,910 --> 00:00:48,180
Entonces este H2 tiene una caja azul alrededor.

11
00:00:48,180 --> 00:00:49,810
Este tiene una caja.

12
00:00:50,130 --> 00:00:53,370
Incluso cosas que no son particularmente cuadradas.

13
00:00:53,490 --> 00:00:56,320
Así que esta esquina redondeada div. Todavía tiene una caja alrededor.

14
00:00:56,490 --> 00:00:58,080
Entre bastidores.

15
00:00:58,080 --> 00:00:59,310
Entonces, esto de aquí

16
00:00:59,520 --> 00:01:05,790
y de este no es realmente redondo o no parece tener las esquinas redondeadas, pero sigue siendo una caja.

17
00:01:05,820 --> 00:01:09,130
Entonces estos cuadros son realmente útiles detrás de las escenas porque podemos diseñar diferentes propiedades en ellos.

18
00:01:09,240 --> 00:01:14,940
Entonces hay cuatro propiedades o cuatro partes diferentes de cada caja.

19
00:01:15,870 --> 00:01:19,350
Hay muchas más propiedades, pero para partes de la caja que podemos manipular.

20
00:01:19,350 --> 00:01:23,550
Entonces supongamos que este diagrama que también es de MDA y es de un párrafo.

21
00:01:23,610 --> 00:01:29,790
Así que tengo un texto en un párrafo y le doy un borde naranja o amarillo y esto es lo que el

22
00:01:29,790 --> 00:01:35,010
usuario ve un texto y un borde, pero detrás de la escena hay otras cosas que están sucediendo.

23
00:01:35,010 --> 00:01:42,210
Entonces, entre el borde y el texto hay algo llamado relleno.

24
00:01:42,360 --> 00:01:47,920
Entonces el relleno es solo el espacio dentro del borde.

25
00:01:48,000 --> 00:01:51,040
Entonces, entre el contenido y el borde está el relleno y

26
00:01:51,190 --> 00:01:56,730
luego también hay un margen que está del otro lado, está entre el borde exterior y cualquier otra cosa.

27
00:01:56,730 --> 00:02:01,060
Entonces usamos el margen a menudo para agregar espacio entre los elementos.

28
00:02:01,170 --> 00:02:04,720
Entonces, si tuviéramos dos párrafos y

29
00:02:04,860 --> 00:02:10,470
quisiera que estuvieran más separados, usaría margen e incrementaría eso.

30
00:02:10,470 --> 00:02:11,340
Así que ahora vamos

31
00:02:11,880 --> 00:02:16,380
a hacer una profunda inmersión en la sintaxis de algunas de las propiedades que queremos usar antes de hacerlo.

32
00:02:16,380 --> 00:02:18,700
tenemos una forma de hacer algo que se ve así.

33
00:02:18,720 --> 00:02:24,000
Quiero mostrarte dos cosas que puedes esperar para hacer que la primera sea la más emocionante, pero lo importante es que ahora

34
00:02:24,330 --> 00:02:29,870
Hasta ahora, en realidad no tenemos una forma de hacer que estas cajas que están

35
00:02:29,880 --> 00:02:34,500
conectadas entre sí tengan asignada una, pero están vacías, no hay texto adentro.

36
00:02:34,500 --> 00:02:39,330
Así que vamos a aprender sobre el modelo de caja y aplicarlo aquí para

37
00:02:39,330 --> 00:02:46,260
hacer este tablero de tres en raya y luego vamos a hacer este sitio de cartera para un fotógrafo de ficción.

38
00:02:46,260 --> 00:02:50,830
Entonces esto es lindo.

39
00:02:51,450 --> 00:02:52,350
Son imágenes que responden, por lo que cambian de tamaño, cambian el tamaño de la ventana y la cuadrícula.

40
00:02:52,420 --> 00:03:00,690
Todo esto se basa en los conceptos que vas a aprender aquí.

41
00:03:00,750 --> 00:03:04,270
Así que voy a seguir adelante y abrir sublime aquí.

42
00:03:04,710 --> 00:03:07,020
Y tengo un documento realmente simple que he creado.

43
00:03:07,560 --> 00:03:10,510
Entonces es solo HTML simple.

44
00:03:10,740 --> 00:03:12,600
Tiene una hoja de estilo conectada.

45
00:03:12,660 --> 00:03:14,670
Esta vacio.

46
00:03:14,700 --> 00:03:15,330
Aparte de algunos comentarios y luego dos párrafos.

47
00:03:15,330 --> 00:03:18,930
Entonces, si abro esto, puedes ver que es

48
00:03:18,930 --> 00:03:25,620
muy básico, muy aburrido y que vamos a utilizarlo para jugar con el modelo de caja.

49
00:03:25,620 --> 00:03:27,660
Así que voy a ir

50
00:03:28,860 --> 00:03:35,910
a mi éxito y voy a seleccionar párrafos y luego solo voy a copiar estos comentarios para

51
00:03:35,910 --> 00:03:41,940
poder escribir algún código debajo de ellos solo para decirles visualmente lo que estoy haciendo.

52
00:03:41,940 --> 00:03:43,370
Comencemos por darles un borde.

53
00:03:43,380 --> 00:03:45,740
Así que este debería ser el borde

54
00:03:45,900 --> 00:03:54,450
de revisión y vamos a hacer un pixel de color azul sólido, guarda esa actualización y puedes ver que obtenemos un borde en todo el contenido.

55
00:03:54,450 --> 00:03:57,630
Y lo que también notan es que el contenido aquí abarca todo el recorrido de la pantalla.

56
00:03:57,630 --> 00:04:02,360
hacemos un párrafo por defecto, recorre toda la pantalla.

57
00:04:02,370 --> 00:04:08,460
Nuestro borde no se detiene aquí y eso es porque cuando

58
00:04:08,460 --> 00:04:09,620
Entonces, si quiero

59
00:04:09,630 --> 00:04:20,210
cambiar el ancho del párrafo en sí del texto, puedo usar la propiedad de ancho y voy a seguir adelante y dar un ancho de uno.

60
00:04:20,220 --> 00:04:23,260
Hagamos 200 píxeles para comenzar.

61
00:04:23,490 --> 00:04:25,390
Y si actualizo puedes ver que ahora hemos cambiado el ancho.

62
00:04:25,890 --> 00:04:29,190
Si inspecciono el contenido no es azul.

63
00:04:29,190 --> 00:04:34,920
Y luego tenemos un borde a su alrededor.

64
00:04:35,940 --> 00:04:37,840
Entonces el contenido es azul.

65
00:04:38,310 --> 00:04:39,700
Y en este diagrama que es este cuadro aquí este cuadro de elemento.

66
00:04:40,110 --> 00:04:45,350
Y luego tenemos un borde que está directamente a su alrededor.

67
00:04:45,630 --> 00:04:48,330
No hay espacio entre el borde y el contenido.

68
00:04:48,330 --> 00:04:52,020
Otra cosa con el ancho y también hay una altura.

69
00:04:52,020 --> 00:04:56,920
Así que hagamos una altura de 300 píxeles y veamos que acabamos de agregar un montón de espacio.

70
00:04:57,060 --> 00:05:02,360
Voy a deshacerme de eso, pero hay una altura que podemos usar al igual que con.

71
00:05:02,370 --> 00:05:06,620
No tenemos que usar solo píxeles para que podamos usar porcentajes.

72
00:05:06,930 --> 00:05:11,760
Y esos son realmente útiles, así que déjame mostrarte.

73
00:05:13,890 --> 00:05:15,780
Hagamos el 50 por ciento y usted se estará preguntando de qué se trata el 50 por ciento de.

74
00:05:15,810 --> 00:05:23,310
Y la respuesta es que es el 50 por ciento del elemento padre.

75
00:05:23,310 --> 00:05:27,290
Entonces, en este caso, es el cuerpo

76
00:05:27,300 --> 00:05:34,230
que el párrafo está dentro del párrafo va a la mitad del cuerpo.

77
00:05:34,230 --> 00:05:35,240
En nuestro caso, el cuerpo es la página completa.

78
00:05:35,310 --> 00:05:37,390
Fue todo el camino.

79
00:05:37,410 --> 00:05:38,240
Así que terminamos con la mitad de la página.

80
00:05:38,250 --> 00:05:40,620
usarlo en esta cuadrícula de imágenes.

81
00:05:40,800 --> 00:05:51,870
Y lo bueno de esto es que si cambio el tamaño de la ventana, también cambia para que mucha gente lo use y lo use para

82
00:05:51,900 --> 00:05:54,890
Puedes ver que las imágenes cambian su ancho y eso es un porcentaje.

83
00:05:55,280 --> 00:05:59,490
OK, así que voy a mantenerlo así por ahora.

84
00:06:00,040 --> 00:06:04,590
Y luego, la siguiente propiedad de la que vamos a hablar es

85
00:06:04,770 --> 00:06:10,080
el relleno y recordar el relleno es este espacio entre el elemento y el borde.

86
00:06:10,080 --> 00:06:11,600
Y ahora no tenemos ningún espacio, las fronteras están en la parte superior.

87
00:06:11,750 --> 00:06:15,410
Entonces hay una propiedad llamada relleno y podemos

88
00:06:15,840 --> 00:06:21,570
darle un número de píxeles y vamos a hacer 10 píxeles para comenzar.

89
00:06:21,570 --> 00:06:22,120
Guarde la actualización del archivo.

90
00:06:22,230 --> 00:06:25,130
Y ahora tenemos 10 píxeles de relleno en todos los lados.

91
00:06:25,410 --> 00:06:28,700
Entonces, si inspecciono ahora verán que ahora hay este

92
00:06:29,040 --> 00:06:36,660
contenido verde que se introdujo, así que tenemos el contenido azul en sí y luego tenemos el verde alrededor, que

93
00:06:37,080 --> 00:06:45,390
está entre el borde y el contenido, así que obviamente podemos incrementar esto y obtenemos mucho más espacio en el interior.

94
00:06:45,380 --> 00:06:49,760
Pero esta no es la única forma de establecer el relleno.

95
00:06:50,490 --> 00:06:52,890
Esto lo establece en los cuatro lados exactamente igual.

96
00:06:52,920 --> 00:06:57,250
Pero a veces solo queremos relleno en un lado o dos lados al igual que con el borde.

97
00:06:57,380 --> 00:07:01,760
Hay atajos para la versión más larga, donde se trata de un límite superior de 10 píxeles y cinco píxeles inferiores.

98
00:07:01,800 --> 00:07:09,510
Lo mismo ocurre con el relleno y lo comentamos y podemos

99
00:07:09,900 --> 00:07:17,940
hacer algo parecido a un relleno de 40 píxeles y fresco.

100
00:07:19,440 --> 00:07:20,270
Y tenemos relleno aquí.

101
00:07:20,520 --> 00:07:22,090
Y ese es el único lugar para el relleno.

102
00:07:22,320 --> 00:07:24,250
Y recuerdo que el espacio de

103
00:07:24,330 --> 00:07:29,640
aquí este azul no es el relleno que es su contenido real que viene de aquí.

104
00:07:29,630 --> 00:07:30,830
Tan diferente a pesar de que parece que hay espacio a la derecha.

105
00:07:30,990 --> 00:07:33,610
Viene de un lugar diferente.

106
00:07:33,620 --> 00:07:35,930
Otra cosa que podemos hacer aquí es jugar con el margen.

107
00:07:37,170 --> 00:07:40,920
Entonces el margen es la última pieza del rompecabezas.

108
00:07:41,160 --> 00:07:43,780
Es el espacio en el exterior de la frontera.

109
00:07:43,860 --> 00:07:45,900
Entonces entre elementos.

110
00:07:45,900 --> 00:07:47,980
Entonces, esto va a ser útil porque quizás

111
00:07:48,450 --> 00:07:54,620
deseemos incrementar o aumentar este espacio aquí mismo o como ejemplo aquí este espacio aquí entre las imágenes se establece usando Marjan.

112
00:07:54,620 --> 00:08:01,280
podemos decir margen y hagamos algo obvio como 100 píxeles para comenzar y actualizar.

113
00:08:01,500 --> 00:08:07,090
Así que en realidad se ve como un relleno, por lo que

114
00:08:07,110 --> 00:08:10,240
Y lo que sucedió es que ahora tenemos

115
00:08:10,410 --> 00:08:15,810
100 píxeles de espacio en todos los lados del elemento en el exterior del borde.

116
00:08:15,810 --> 00:08:17,100
Entonces encuentra el aspecto.

117
00:08:18,240 --> 00:08:19,360
Verá que en

118
00:08:19,980 --> 00:08:26,910
Chrome se identifica como naranja, azul es el contenido Verde, el margen en naranja es el margen.

119
00:08:27,000 --> 00:08:28,710
Así que como relleno.

120
00:08:28,800 --> 00:08:30,030
es de 500 píxeles.

121
00:08:30,030 --> 00:08:36,050
A veces solo queremos establecer una parte del margen en un lado para que podamos hacer algo como margen superior

122
00:08:36,690 --> 00:08:38,890
Y luego, cuando vengan a este

123
00:08:38,900 --> 00:08:45,000
por ahora y ahorren, y solo tenemos espacio en la parte superior a la izquierda, no hay nada.

124
00:08:45,000 --> 00:08:46,070
Y luego más espacio en la parte superior de este.

125
00:08:46,160 --> 00:08:48,180
Nada en la parte inferior o la izquierda o la derecha.

126
00:08:48,170 --> 00:08:50,480
Entonces ese es el margen.

127
00:08:50,610 --> 00:08:52,710
Entonces, a veces debemos agregar valores

128
00:08:52,710 --> 00:08:58,500
a todos los lados del margen, pero no queremos tener que hacerlo con cuatro líneas diferentes.

129
00:08:58,500 --> 00:08:59,510
Así que no queremos

130
00:08:59,660 --> 00:09:04,110
que sean exactamente iguales si están aquí, pero no todos tenemos que decir margen margen superior margen izquierdo margen inferior.

131
00:09:04,200 --> 00:09:06,500
Entonces hay otro atajo como para frontera.

132
00:09:06,570 --> 00:09:09,550
O podemos hacer las cosas a la vez, podemos hacer este margen y darle cuatro valores.

133
00:09:09,570 --> 00:09:14,780
Entonces, el primero es para la parte superior y luego la derecha y luego la inferior.

134
00:09:14,820 --> 00:09:21,300
Hagamos 500 píxeles y luego la izquierda y al hacerlo obtenemos este

135
00:09:21,750 --> 00:09:24,330
bonito margen de cuatro lados

136
00:09:27,570 --> 00:09:35,550
donde los valores son todos diferentes, pero solo teníamos que hacer en una línea.

137
00:09:35,550 --> 00:09:36,820
Entonces solo para inspeccionar esto aquí

138
00:09:37,290 --> 00:09:44,190
y ver si obtenemos los 500 píxeles en la parte inferior, los 20 en la parte superior obtenemos el cien a la izquierda y luego tenemos los 40 a la derecha.

139
00:09:44,180 --> 00:09:49,920
Entonces, hay una última cosa que verá a menudo con un margen que es el margen.

140
00:09:50,010 --> 00:09:53,790
Auto.

141
00:09:53,790 --> 00:09:54,480
Entonces, lo que podemos hacer es configurar el margen para que sea automático a la izquierda o a la derecha.

142
00:09:54,780 --> 00:09:59,340
Y lo que eso hará es centrar un elemento para nosotros.

143
00:09:59,370 --> 00:10:02,550
Déjame mostrarte cómo funciona eso.

144
00:10:02,550 --> 00:10:04,570
y abajo y automático a la izquierda.

145
00:10:04,710 --> 00:10:12,870
Y el comentario vuelve a salir y podemos escribir margen y digamos cero margen en la parte superior automática a la izquierda o en el margen cero a la derecha

146
00:10:12,870 --> 00:10:18,390
Y si hago este tamaño completo y actualizo verá que centra las cosas para nosotros.

147
00:10:18,510 --> 00:10:23,520
Entonces, eso significa que se decidió que esto es un 50 por ciento

148
00:10:23,520 --> 00:10:30,740
porque dijimos que aquí y luego se da cuenta de que la izquierda es automática y la derecha es

149
00:10:30,750 --> 00:10:36,810
automática, por lo que hace todo lo que necesita hacer y eso realmente nos centrará en nosotros.

150
00:10:36,810 --> 00:10:37,880
Y luego tenemos cero en la parte superior e inferior para que estén comprimidos.

151
00:10:37,980 --> 00:10:41,540
Lo que también podemos hacer es una forma aún más corta de hacerlo y parece que este margen cero es Otto.

152
00:10:41,930 --> 00:10:47,940
Y entonces esto establecerá que la parte superior e inferior se pongan a cero a la izquierda y derecha a automático.

153
00:10:48,540 --> 00:10:53,470
Así que nada cambia y también podemos usar esta sintaxis si quiero

154
00:10:53,580 --> 00:11:01,380
agregar 50 píxeles a la parte superior y automático o si quiero agregar 50 píxeles y 20 píxeles.

155
00:11:01,380 --> 00:11:04,700
Lo que hay que recordar es que necesitas la x allí a menos que el número sea cero.

156
00:11:04,740 --> 00:11:09,830
Entonces, si hago esto, agrega 20 en la parte superior a la izquierda y la derecha y luego agrega 50 en la parte superior e inferior.

157
00:11:10,430 --> 00:11:17,720
Así que vamos a resumir aquí una vez más.

158
00:11:18,780 --> 00:11:21,070
Tenemos el contenido interno que está aquí.

159
00:11:21,120 --> 00:11:25,370
Tenemos relleno que está entre los bordes, así que todo lo que tenemos es

160
00:11:25,830 --> 00:11:31,290
relleno a la izquierda y luego tenemos margen que está entre el borde y en el otro lado.

161
00:11:31,430 --> 00:11:33,440
Así que entre los elementos básicamente.

162
00:11:33,450 --> 00:11:35,530
Entonces, en los siguientes videos vamos a aplicar estos conceptos y usarlos a lo largo de este curso

163
00:11:35,610 --> 00:11:40,150