Bienvenido a Platzi

🌐 Fusión de los árboles HTML y CSS en el diseño web

🧠 IDEA CLAVE 💡

Una página web no aparece “lista” de inmediato. El navegador:

➡️ construye estructuras

➡️ combina información

➡️ organiza visualmente los elementos

Todo esto ocurre gracias a HTML + CSS.

🌳 ÁRBOLES QUE INTERVIENEN

🔹 🌲 Árbol HTML (DOM)

📄 Se genera a partir del documento HTML.

✔ Convierte cada etiqueta en un nodo ✔ Representa la estructura del contenido

📌 Ejemplos de nodos:

·         header

·         main

·         p

·         footer

🔹 🎨 Árbol CSS (CSSOM)

🎨 Se crea a partir de las reglas CSS.

✔ Define la apariencia visual

✔ Contiene información como:

·         🎨 Colores

·         📏 Tamaños

·         ↔️ Márgenes

·         📍 Posiciones

🔗 FUSIÓN DE ÁRBOLES

DOM 🌲 + CSSOM 🎨

➡️ El navegador los combina

➡️ Decide:

·         Qué elementos existen

·         Cómo deben verse

📌 Esta fusión es la base de la estructura visual final.

📐 ¿QUÉ ES EL LAYOUT?

El layout es la etapa donde el navegador:

📍 Calcula posiciones

 📏 Define tamaños

 🧩 Organiza elementos en pantalla

👉 Transforma estructura + estilos en una disposición real.

📦 ELEMENTOS Y CAJAS

🔸 🔁 De nodos a cajas

·         Los elementos HTML comienzan como nodos

·         Al aplicar CSS, muchos se convierten en:

📦 Cajas visuales