Saltar al contenido principal
Codigo Heroe
Lista de tareas
Distribución general de la página1/18
A la lista de tareas
  1. 1. El modelo de cajas
  2. 2. El flujo
  3. 3. La distribución y el diseño de referencia
  4. 4. La propiedad display: tipos de caja
  5. 5. grid-template-columns: la plantilla del contenedor grid
  6. 6. La propiedad padding: el relleno
  7. 7. La propiedad margin: los márgenes
  8. 8. fr: una fracción del espacio disponible
  9. 9. La propiedad gap: espacio entre elementos grid
  10. 10. Terminamos la primera página
  11. 11. Usamos flexbox
  12. 12. La propiedad width: el ancho del elemento
  13. 13. justify-content: distribución en el eje principal
  14. 14. Márgenes automáticos
  15. 15. Agregamos un contenedor
  16. 16. Creamos columnas en el pie de página
  17. 17. Distribuimos las columnas del pie
  18. 18. Alineamos un elemento en vertical
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

El modelo de cajas

En este curso veremos técnicas más avanzadas para crear sitios web. En particular, aprenderemos a distribuir los elementos de una página.

En el curso «Introducción a HTML y CSS» conocimos muchas etiquetas. Los elementos visibles de la página se representan mediante regiones rectangulares llamadas cajas (boxes en inglés).

Una caja se compone del contenido (content), el relleno (padding), el borde (border) y el margen (margin):

Esquema de una caja

El aspecto de una caja depende en gran medida de su tipo o del tipo de su elemento padre. Ya trabajamos con dos tipos de cajas, de bloque y en línea, en «Introducción a HTML y CSS».

Las cajas de bloque empiezan en una línea nueva y, por defecto, ocupan el ancho disponible de su elemento padre. Por ejemplo, las etiquetas <p>, <div> y <h1> generan cajas de bloque de forma predeterminada.

Título

Párrafo

Las cajas en línea se colocan una después de otra en la misma línea, y su ancho depende de su contenido. Por ejemplo, <a>, <span> y <b> generan cajas en línea de forma predeterminada.

EnlaceUna línea de textoTexto en negrita

Para crear páginas web, conviene aprender a reconocer sus cajas. Vamos a practicar: conectaremos una hoja de estilos que las resalta y después agregaremos cajas nuevas de distintos tipos.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!-- <link rel="stylesheet" href="outline.css"> --> <title>Estudio de arquitectura AlterMansion</title> </head> <body> <header class="page-header"> <img src="img/logo-alter-mansion.svg" width="60" height="30" alt="Logotipo del estudio de arquitectura AlterMansion"> <h1 class="title">Estudio de arquitectura AlterMansion</h1> </header> <main class="page-main"> <article class="article article-1"> <img class="article-image" src="img/house1.jpg" alt="Fachwerk-23" width="100" height="80"> <div> <h2 class="article-title">Proyecto de casa de entramado «Fachwerk-23»</h2> <p class="article-text">Amplia casa de dos pisos con 3 dormitorios, estudio, una gran cocina-comedor y una terraza abierta.</p> <!-- Agrega el párrafo aquí --> </div> </article> <article class="article article-2"> <img class="article-image" src="img/house2.jpg" alt="Ermitaño-11" width="100" height="80"> <div> <h2 class="article-title">Proyecto de casa de campo «Ermitaño-11»</h2> <p class="article-text">Casa tipo estudio de un piso: la opción más compacta y económica. Comodidad mínima y privacidad máxima.</p> </div> </article> <article class="article article-3"> <img class="article-image" src="img/house3.jpg" alt="Monarca-39" width="100" height="80"> <div> <h2 class="article-title">Proyecto de residencia «Monarca-39»</h2> <p class="article-text">Mansión de tres pisos para la realeza. Ideal para organizar bailes y recepciones de gala.</p> </div> </article> <article class="article article-4"> <img class="article-image" src="img/house4.jpg" alt="Hobbit-15" width="100" height="80"> <div> <h2 class="article-title">Proyecto de casa subterránea «Hobbit-15»</h2> <p class="article-text">Vivienda ecológica y espaciosa con 5 habitaciones y una gran despensa. Ideal para personas de baja estatura.</p> </div> </article> </main> <footer class="page-footer"><span class="copyright">© Estudio de Cupcake, 2020</span></footer> </body> </html>
CSS
body { margin: 0; font-family: "Trebuchet MS", "Verdana", sans-serif; font-size: 14px; line-height: 22px; background-color: #ebeff2; color: #333333; } .page-header { display: flex; min-height: 50px; align-items: center; justify-content: center; padding: 10px 20px; background-color: #3b70a0; } .title { margin: 0; margin-left: 20px; font-weight: 700; font-size: 22px; line-height: 28px; color: #ffffff; } .page-main { margin: 20px; } .article { display: flex; margin-bottom: 10px; padding: 20px; background-color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .article-image { margin-right: 20px; } .article-title { margin: 0; margin-bottom: 4px; font-weight: 700; font-size: 18px; line-height: 24px; color: #24527C; } .article-text { margin: 0; } .page-footer { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; background-color: #3b70a0; color: #ffffff; } .copyright:hover { background-color: #ffffff; color: #3b70a0; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. En la línea 6, quita los comentarios del enlace a la hoja de estilos outline.css. Las cajas de la página quedarán resaltadas.
    2. En la línea 20, agrega un párrafo <p> con el texto Nueva caja. Aparecerá una caja de bloque nueva en la primera tarjeta de la vista previa.
    3. En la línea 19, envuelve las palabras casa de dos pisos en una etiqueta <span>. Aparecerá una caja en línea nueva en la primera tarjeta.
    Codigo Heroe

    © 2023-2026, codigoheroe.com