1
00:00:00,690 --> 00:00:11,470
Todos los contenidos de una web están dispuestos en ella mediante un modelo de caja, que ya vimos, eso del padding, el margin que teníamos.

2
00:00:12,929 --> 00:00:20,489
La cuestión es que en un esquema normal, pues todo se aplica uno detrás de otro.

3
00:00:20,589 --> 00:00:24,210
Si es el código fuente, pues este es el esquema normal, uno detrás de otro.

4
00:00:24,210 --> 00:00:30,070
En el esquema flotante podríamos indicar que un elemento flota, en este caso, en su izquierda

5
00:00:30,070 --> 00:00:36,729
Y este bloque 3 se va escribiendo a la derecha de este hasta que acaba y después continúa

6
00:00:36,729 --> 00:00:45,090
E incluso podríamos definir un esquema absoluto donde decimos que cada bloque de información lo ponemos donde nos apetezca

7
00:00:45,090 --> 00:00:49,130
Directamente donde nos apetezca, incluso solapándose unos con otros

8
00:00:49,130 --> 00:00:52,689
Bueno, estos son los esquemas de posicionamiento básicos

9
00:00:52,689 --> 00:00:56,270
entonces vamos a pasar al esquema de posicionamiento flotante

10
00:00:56,270 --> 00:01:00,810
entonces para ello hay dos elementos que son float y clear

11
00:01:00,810 --> 00:01:09,150
y float pues dice por ejemplo que una clase capital dentro de span

12
00:01:09,150 --> 00:01:11,730
esa letra que en este caso corresponde a esta L de aquí

13
00:01:11,730 --> 00:01:15,890
va a flotar a la izquierda con este background de rosa

14
00:01:15,890 --> 00:01:18,349
con ese color rojo, con ese tipo de caracteres

15
00:01:18,349 --> 00:01:21,489
y efectivamente vemos que esta letra, ella, se queda ahí

16
00:01:21,489 --> 00:01:27,790
Y todo lo demás va poniéndose alrededor de ella

17
00:01:27,790 --> 00:01:28,290
¿De acuerdo?

18
00:01:29,049 --> 00:01:30,829
Incluso eso lo podemos aplicar directamente

19
00:01:30,829 --> 00:01:32,549
Que es la primera letra porque es la misma

20
00:01:32,549 --> 00:01:36,409
Bueno, esto es como haríamos el float

21
00:01:36,409 --> 00:01:37,950
Y todo iría alrededor de ella

22
00:01:37,950 --> 00:01:41,049
Si pusiéramos, por ejemplo, que esto aquí hay un margin

23
00:01:41,049 --> 00:01:45,049
Margin right de 1M

24
00:01:45,049 --> 00:01:46,950
Pues esto iría un poquito más para acá

25
00:01:46,950 --> 00:01:49,930
En vez de estar aquí, pues a lo mejor estaba ahí aproximadamente

26
00:01:49,930 --> 00:01:50,569
¿De acuerdo?

27
00:01:50,569 --> 00:01:53,930
bien, esto es muy útil para imágenes

28
00:01:53,930 --> 00:01:55,189
porque yo puedo poner una imagen

29
00:01:55,189 --> 00:01:57,150
si yo hago un texto que tiene una imagen

30
00:01:57,150 --> 00:01:58,349
esto se vería de esta manera

31
00:01:58,349 --> 00:02:00,930
sin embargo seguramente yo no quiero que se muestre así

32
00:02:00,930 --> 00:02:04,090
yo seguramente quiero que esto se muestre así

33
00:02:04,090 --> 00:02:05,689
entonces para ello simplemente

34
00:02:05,689 --> 00:02:06,810
diciéndole float left

35
00:02:06,810 --> 00:02:09,090
flotaría a la parte izquierda

36
00:02:09,090 --> 00:02:11,349
y con float right a la parte derecha

37
00:02:11,349 --> 00:02:13,469
con lo cual queda bastante bien

38
00:02:13,469 --> 00:02:14,569
incluso si tengo

39
00:02:14,569 --> 00:02:17,009
varias imágenes, unas quiero poner a la izquierda

40
00:02:17,009 --> 00:02:19,310
y otras a la derecha, pues puedo crearme

41
00:02:19,310 --> 00:02:20,889
unas imágenes

42
00:02:20,889 --> 00:02:23,210
que tengan la clase izquierda

43
00:02:23,210 --> 00:02:25,129
que vayan a un sitio y otras

44
00:02:25,129 --> 00:02:26,530
a otro, ¿de acuerdo?

45
00:02:26,990 --> 00:02:29,849
con lo cual ya es cuestión de ir jugando con esas características

46
00:02:29,849 --> 00:02:31,050
clear

47
00:02:31,050 --> 00:02:33,469
es una propiedad que lo que dice es

48
00:02:33,469 --> 00:02:34,930
en este momento, por favor

49
00:02:34,930 --> 00:02:37,289
acaba con el float

50
00:02:37,289 --> 00:02:38,849
acaba con el float

51
00:02:38,849 --> 00:02:40,789
entonces, bueno, pues yo tengo por ejemplo

52
00:02:40,789 --> 00:02:43,150
que la etiqueta hr en este caso

53
00:02:43,150 --> 00:02:44,949
va a limpiarme

54
00:02:44,949 --> 00:02:46,969
todos los floats que haya en marcha

55
00:02:46,969 --> 00:02:49,090
con lo cual, aunque aquí yo continuaría

56
00:02:49,090 --> 00:02:51,409
en situación normal con el logotipo de Linux

57
00:02:51,409 --> 00:02:52,610
debe flotar, no sé qué

58
00:02:52,610 --> 00:02:55,370
esta línea corta todo y empezamos

59
00:02:55,370 --> 00:02:57,590
de nuevo con nuestros elementos

60
00:02:57,590 --> 00:02:59,330
pero es muy interesante

61
00:02:59,330 --> 00:03:01,110
muchas veces se olvida poner y realmente

62
00:03:01,110 --> 00:03:02,490
es muy importante para leer

63
00:03:02,490 --> 00:03:04,729
¿cómo podemos centrar una imagen?

64
00:03:04,889 --> 00:03:08,110
pues si está dentro de un párrafo

65
00:03:08,110 --> 00:03:09,490
pues centrando ese párrafo

66
00:03:09,490 --> 00:03:10,810
no tenemos mayor problema

67
00:03:10,810 --> 00:03:13,090
ese párrafo, esa división o lo que sea

68
00:03:13,090 --> 00:03:15,310
cuando queremos distribuir

69
00:03:15,310 --> 00:03:17,349
la información, aunque sea continua

70
00:03:17,349 --> 00:03:19,050
podemos aplicárselo, por ejemplo

71
00:03:19,050 --> 00:03:21,310
que todos los párrafos vayan de esta manera

72
00:03:21,310 --> 00:03:23,370
ponemos todos, el primero, el segundo

73
00:03:23,370 --> 00:03:24,430
el tercero, el cuarto

74
00:03:24,430 --> 00:03:26,990
si fuera más pequeña la información, pues cabría

75
00:03:26,990 --> 00:03:29,090
más por línea, pero esto quedaría todos los

76
00:03:29,090 --> 00:03:31,289
elementos uno detrás de otro

77
00:03:31,289 --> 00:03:32,189
¿de acuerdo?

78
00:03:32,810 --> 00:03:34,930
¿qué ocurre cuando nos salimos? pues bueno

79
00:03:34,930 --> 00:03:36,689
que se puede ver la información de esta manera

80
00:03:36,689 --> 00:03:39,330
con lo cual podemos poner directamente

81
00:03:39,330 --> 00:03:41,030
el overflow auto

82
00:03:41,030 --> 00:03:43,270
para que él sepa cuánto es la información

83
00:03:43,270 --> 00:03:45,150
que va a caber dentro

84
00:03:45,150 --> 00:03:46,990
de ella, esta es la posición

85
00:03:46,990 --> 00:03:47,889
flotante

86
00:03:47,889 --> 00:03:50,830
¿Qué ocurre con la posición absoluta?

87
00:03:51,050 --> 00:03:54,069
Pues la posición absoluta tiene una serie de características

88
00:03:54,069 --> 00:03:57,370
Puede ser estático, posicionamiento absoluto estático

89
00:03:57,370 --> 00:04:01,069
O relativo, o fijo, o realmente absoluto

90
00:04:01,729 --> 00:04:06,729
Bueno, el estático, el elemento se sitúa en la posición que le corresponde

91
00:04:06,729 --> 00:04:09,110
De acuerdo con el flujo normal, es decir, es como no hacer nada

92
00:04:09,110 --> 00:04:13,289
El relativo, es relativo a donde estoy yo situado

93
00:04:13,289 --> 00:04:19,029
y a partir de ahí puedo establecer las propiedades top, bottom, left o right

94
00:04:19,029 --> 00:04:21,970
entonces todo esto lo podemos indicar

95
00:04:21,970 --> 00:04:27,129
por ejemplo, yo estoy aquí en este párrafo desplazado

96
00:04:27,129 --> 00:04:29,370
digo que su background color es white

97
00:04:29,370 --> 00:04:32,970
que su border es negro de un píxel sólido

98
00:04:32,970 --> 00:04:34,230
es decir, estamos en este de aquí

99
00:04:34,230 --> 00:04:37,470
y que su posición es relativa top 20 píxel

100
00:04:37,470 --> 00:04:40,930
si tendría que estar aquí, esta es la posición donde tendría que estar

101
00:04:40,930 --> 00:04:44,670
si no hiciéramos nada, él ha bajado 20 píxeles para abajo

102
00:04:44,670 --> 00:04:48,370
en este caso decimos que top-20 debería estar aquí

103
00:04:48,370 --> 00:04:51,069
y ha subido un montón de píxeles para arriba

104
00:04:51,069 --> 00:04:58,149
con eso podemos ir colocando todos los textos que queramos

105
00:04:58,149 --> 00:05:01,790
un poco para verlo, el top es esta parte superior

106
00:05:01,790 --> 00:05:03,550
el bottom esta parte inferior

107
00:05:03,550 --> 00:05:06,069
left esta parte de aquí y este right

108
00:05:06,069 --> 00:05:11,889
y aquí el ancho y el alto del elemento con el que estamos trabajando

109
00:05:11,889 --> 00:05:17,089
Fixed hace lo mismo que un absoluto

110
00:05:17,089 --> 00:05:19,329
lo único que se queda fijo en todo momento

111
00:05:19,329 --> 00:05:21,649
cuando movamos la barra de desplazamiento del menú

112
00:05:21,649 --> 00:05:25,750
este elemento que pongamos como fijo se va a mantener en la misma posición

113
00:05:25,750 --> 00:05:26,430
¿de acuerdo?

114
00:05:27,209 --> 00:05:29,750
bueno, ya lo veremos en la página de ejemplos

115
00:05:29,750 --> 00:05:32,509
o podemos verlo ahora mismo, tampoco hace falta

116
00:05:32,509 --> 00:05:37,949
vemos al menos de arriba como se está quedando en todo momento

117
00:05:37,949 --> 00:05:41,389
independiente de que bajemos todos esos elementos

118
00:05:41,389 --> 00:05:47,149
en absolute lo que hacemos es colocar cada cosa en el sitio correspondiente

119
00:05:47,149 --> 00:05:52,310
entonces nosotros estamos colocando elementos donde consideremos

120
00:05:52,310 --> 00:05:54,889
cuando queremos volver al principio pues volvemos

121
00:05:54,889 --> 00:05:58,250
pero no estamos modificando la posición

122
00:05:58,250 --> 00:05:59,129
voy a volver

123
00:05:59,129 --> 00:06:03,649
y después hay una propiedad que es z-índex

124
00:06:03,649 --> 00:06:08,009
que dice la profundidad de una capa, de cualquier elemento

125
00:06:08,009 --> 00:06:10,930
entonces los elementos que no tienen esta propiedad

126
00:06:10,930 --> 00:06:12,829
pues tienen un z-índex igual a cero

127
00:06:12,829 --> 00:06:17,889
y los elementos con mayor z-índex se colocan sobre los elementos con menor z-índex

128
00:06:17,889 --> 00:06:19,930
así llegamos a situaciones de este tipo

129
00:06:19,930 --> 00:06:22,329
donde podemos ver esta información

130
00:06:22,329 --> 00:06:28,490
esto junto a la opacidad nos permite poner páginas bastante interesantes

131
00:06:28,490 --> 00:06:32,269
Aquí hay un montón de ejemplos de ellas

132
00:06:32,269 --> 00:06:41,220
Otro elemento interesante son las cajas flexibles

133
00:06:41,220 --> 00:06:48,519
Las cajas flexibles nos permiten también ir colocando la información acorde a una serie de elementos

134
00:06:48,519 --> 00:06:57,819
Tienen muchísimas propiedades y es mejor que las vean tranquilamente todas ellas

135
00:06:57,819 --> 00:06:59,740
Para ver cómo pueden conseguir

136
00:06:59,740 --> 00:07:02,899
Pues desde colocar las cosas en orden inverso

137
00:07:02,899 --> 00:07:03,699
Etcétera, etcétera

138
00:07:03,699 --> 00:07:06,040
O colocar la información en función del contenido que tienen

139
00:07:06,040 --> 00:07:07,339
O irlas cortando

140
00:07:07,339 --> 00:07:09,040
Etcétera, etcétera

141
00:07:09,040 --> 00:07:12,100
Es una información francamente interesante

142
00:07:12,100 --> 00:07:14,399
Ya prácticamente estamos acabando

143
00:07:14,399 --> 00:07:15,420
Todo el tema

144
00:07:15,420 --> 00:07:16,879
De CSS

145
00:07:16,879 --> 00:07:20,019
Así que ya tenemos todos los elementos

146
00:07:20,019 --> 00:07:21,600
Para poder trabajar con ellos