Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

El modelo de caja - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 14 de enero de 2021 por Julio G.

159 visualizaciones

Explicación para el ejercicio del Aula Virtual

Más información Transcripción

Descargar la transcripción

Voy a explicar en qué consiste el modelo de caja para los elementos HTML y también vamos a realizar la actividad que está asociada a esta explicación, a este tema. 00:00:05
Entonces, el modelo de caja consiste en entender que todos los elementos HTML, como el que aparece en la imagen, que es un párrafo, realmente están contenidos en una caja. 00:00:19
y que podemos cambiar alguna de sus propiedades CSS para modificar su apariencia, entendiendo, como os digo, que están contenidos en una caja. 00:00:27
También es importante recordar los conceptos de elemento en bloque y elemento en línea que alguna vez hemos hablado, pero que no he insistido mucho y que ahora os voy a comentar con unos ejemplos. 00:00:40
Es importante que hayáis leído las actividades o todos los apartados que 00:00:53
recomendaba sobre CSS para entender bien lo que ahora vamos a hacer. 00:01:02
Entonces vamos a ir a brackets. Estos primeros ejemplos conviene hacerlos en 00:01:07
el modo o mediante código. Aunque utilicemos bluegriffon, en principio os 00:01:13
recomiendo que uséis la opción de código para empezar a manejar CSS y para 00:01:17
entenderlo mejor entonces bueno aquí dentro de un documento html simplemente 00:01:22
escrito un párrafo y quería manifestar pues que los párrafos se muestran en 00:01:28
bloque como vamos a comprobar que se muestran en bloque quiere decir que 00:01:35
aunque el siguiente elemento html que aparezca en esta página va a aparecer a 00:01:40
a pesar de que tiene espacio, va a aparecer en otra línea. 00:01:54
Es decir, los párrafos ocupan todo el espacio del navegador que hay a su lado. 00:01:58
Para ver esto vamos a utilizar la primera propiedad CSS para aplicar estilos mediante CSS. 00:02:08
Como ya sabéis, se puede hacer de diferentes maneras, pero en este caso lo voy a hacer mediante la etiqueta style 00:02:15
en el G del documento, voy a coger 00:02:23
selector párrafo, eso quiere decir que las propiedades 00:02:27
que voy a modificar van a afectar al párrafo y simplemente vamos a utilizar 00:02:33
una propiedad que es la propiedad border 00:02:37
vamos a poner un border de 2 píxeles, sólido y de color rojo 00:02:41
vale, le doy a guardar 00:02:45
y vemos como se modifica en el navegador, aquí podemos 00:02:49
apreciar lo que os decía, observamos como los párrafos 00:02:53
a pesar de el texto del propio párrafo no ocupa 00:02:57
el ancho del navegador, sí que lo hace el bloque, puesto que es 00:03:01
un elemento en bloque. Los elementos en línea 00:03:05
son por ejemplo, o un ejemplo de elemento en línea puede ser 00:03:10
los enlaces, en este caso un enlace 00:03:15
vamos a poner un enlace que no lleva a ningún sitio 00:03:18
En este caso vamos a comprobar como un enlace es un elemento en línea y esto quiere decir que permite, si hay ancho suficiente, que los elementos aparezcan uno al lado de otro. 00:03:22
Ahí vemos que aunque en la línea de código yo esté separando los enlaces, aquí aparecen juntos. 00:03:48
Si añadimos la propiedad border a los enlaces, comprobaríamos que en este caso el elemento ocupa simplemente el espacio del propio contenido, es decir, es un elemento en línea. 00:03:54
Los propios bordes que han aparecido en estos elementos nos muestran esa forma de caja de la que hablamos. 00:04:26
Vamos a ir ahora viendo cómo modificamos las propiedades de esa caja. Por ejemplo, vemos que entre los dos enlaces que hemos creado existe una separación, o entre el enlace y el borde existe una separación que ahora mismo es mínima. 00:04:34
Eso sería la propiedad margin y nos permite establecer un valor determinado de píxeles para generar esa separación. Por ejemplo, voy a poner 10 píxeles. También estos valores se pueden poner en porcentajes, pero bueno, de momento para entender el modelo de caja vamos a utilizar píxeles como medida de comunidad de distancia. 00:04:50
comprobamos que aparece esa separación 00:05:18
la siguiente propiedad sería la separación 00:05:22
que hay entre el contenido y el borde interior de la caja 00:05:25
esa propiedad 00:05:27
es el padding, podemos establecer 00:05:32
una separación como os decía 00:05:36
entre el contenido 00:05:38
y el borde interior 00:05:42
ahí vemos 00:05:45
podríamos hacer lo mismo 00:05:47
con los elementos de tipo párrafo 00:05:52
y posteriormente lo vamos a hacer en el ejercicio. También podríamos 00:05:56
la siguiente propiedad sería la que establece un color para 00:06:00
el fondo de estas cajas. 00:06:04
Vamos a coger un fondo 00:06:08
y vemos que según vamos cambiando 00:06:10
lo vamos activando y podríamos cambiar, por ejemplo, 00:06:16
esto no es una propiedad de caja 00:06:19
sino es una propiedad de cualquier elemento que es el color del elemento 00:06:24
vale, pero ahora vamos a comprobar 00:06:28
otra cosa importante que es la forma en la cual 00:06:34
aparecen estos elementos y como podemos modificarlos 00:06:39
es decir, podemos modificar 00:06:42
la propiedad display que es la forma en la que se muestra un elemento párrafo 00:06:44
un elemento enlace de en línea a bloque o viceversa bueno se me olvidaba también que 00:06:50
podemos manejar la propiedad del ancho que también es interesante en muchos casos por 00:06:58
ejemplo vamos a manejar la propiedad del ancho en el caso de los párrafos y vamos a ponerle 00:07:03
que sean de un 30% y ahí observamos cómo se ha reducido el ancho de la caja al tamaño que 00:07:15
le hemos dicho, ya que mediante la propiedad display vamos a poder hacer que por ejemplo 00:07:28
un elemento que se muestra normalmente en bloque como es un párrafo pues se muestre 00:07:40
en línea, bueno en este caso como todos los elementos serán en línea vemos que se nos 00:07:45
han incluso superpuesto, vamos a intentar arreglar esto de alguna forma, para empezar 00:07:56
vamos a hacer lo contrario, vamos a decir a los enlaces que se muestren como un bloque, ahí lo tenemos, como no les hemos puesto ningún ancho determinado, 00:08:01
pues se muestran como un bloque y ocupan todo el ancho de la página. Bueno, pues vamos a añadirle un ancho determinado, por ejemplo, igual que los que le hemos puesto a los párrafos, 00:08:17
Pero mirad lo que nos pasó con el párrafo. A pesar de haberle puesto un ancho, el hecho de obligarles a ponerse en línea establece esa forma de mostrarse con el contenido a lo largo del párrafo. 00:08:33
Es decir, no me está respetando esta propiedad. Para ello, lo interesante es utilizar una propiedad combinada, que es el inline block, y que nos permite llegar al resultado que nos interesa, que es que aparezcan en línea, pero con un ancho, en este caso, del 30%. 00:08:48
Ahí vemos que conseguíamos el efecto deseado. Esto es un poco lo que se nos pedía en la actividad que os he propuesto. 00:09:08
La verdad es que pretendía resolverla, pero yo creo que con estas indicaciones vais a ser capaces de resolverlo vosotras solas. 00:09:19
una cosa que faltaría 00:09:26
que hago en la actividad 00:09:31
y que no es tanto del modelo de caja 00:09:32
sino en general 00:09:34
es quitar el subrayado 00:09:35
de los enlaces 00:09:38
Subido por:
Julio G.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
159
Fecha:
14 de enero de 2021 - 18:33
Visibilidad:
Público
Centro:
IES LA CABRERA
Duración:
09′ 41″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
80.40 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid