box model
description
Transcript of box model
![Page 1: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/1.jpg)
Modelo de cajasen el diseño web
![Page 2: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/2.jpg)
Modelo de cajas o box model
Es una característica del CSS que condiciona el diseño de todo sitio web creado con HTML y CSS.
![Page 3: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/3.jpg)
Todos los elementos de una página son representados por medio de cajas rectangulares.
Estas cajas se crean automáticamente cada vez que se inserta una etiqueta de HTML.
![Page 4: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/4.jpg)
![Page 5: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/5.jpg)
![Page 6: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/6.jpg)
Estas cajas están presentes pero no son visibles si no se indica algún color de fondo o un borde.
![Page 7: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/7.jpg)
Partes de una caja
![Page 8: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/8.jpg)
Estas cajas se componen de cuatro elementos esenciales: margen, relleno, borde y contenido.
![Page 9: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/9.jpg)
Contenido
Padding
Border
Margin
![Page 10: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/10.jpg)
Contenido (Content)
Es la información o contenido de un elemento HTML. Este puede ser texto (párrafos, encabezados, enlaces, listados) o imágenes.
![Page 11: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/11.jpg)
<p>Contenido</p>
![Page 12: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/12.jpg)
Contenido
![Page 13: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/13.jpg)
Relleno (Padding)
Es el espacio libre entre el contenido y el borde de éste. El relleno es una característica opcional.
![Page 14: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/14.jpg)
HTML: <p>Contenido</p>
CSS:
p { padding: 25px;}
![Page 15: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/15.jpg)
Contenido
![Page 16: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/16.jpg)
Borde (Border)
Linea o contorno que encierra el contenido y su relleno.
![Page 17: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/17.jpg)
HTML: <p>Contenido</p>
CSS:
p { padding: 25px;
border: dashed 7px blue;}
![Page 18: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/18.jpg)
Contenido
![Page 19: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/19.jpg)
Margen (Margin)
Separación existente entre la caja y el resto del contenido del sitio web.
![Page 20: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/20.jpg)
HTML: <p>Contenido</p>
CSS:
p { padding: 25px;
border: dashed 7px blue; margin: 50px;}
![Page 21: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/21.jpg)
Contenido
![Page 22: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/22.jpg)
![Page 23: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/23.jpg)
![Page 24: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/24.jpg)
![Page 25: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/25.jpg)
![Page 26: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/26.jpg)
![Page 27: box model](https://reader034.fdocuments.ec/reader034/viewer/2022051820/563dbb7f550346aa9aadb49a/html5/thumbnails/27.jpg)