Publicidad
Publicidad

Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 26 ¿Que es el MODELO de CAJA en CSS? (BOX MODEL)

Miniatura del vídeo

Clase: Introducción al Modelo de Caja (Box Model) en CSS

Descubre qué es el modelo de caja en CSS y cómo los navegadores representan los elementos HTML mediante propiedades fundamentales como margen, borde y relleno.

Esta lección explica los conceptos básicos necesarios para comprender la estructura visual de cualquier elemento web. A través del modelo de caja (Box Model), se define cómo CSS permite controlar el espacio, los límites y el tamaño de los componentes en una página, siendo un pilar esencial en el diseño y maquetación web. El contenido se presenta como parte del curso organizado por la plataforma para facilitar el aprendizaje progresivo del desarrollo front-end.

Puntos Clave de la Lección

  • ¿Qué es el Modelo de Caja?: Se explica que el Box Model es la forma en la que los navegadores representan los elementos HTML, visualizándolos como un rectángulo que contiene propiedades específicas [00:00:14].
  • Componentes del Box Model: Se enumeran las propiedades principales que conforman este modelo: margin (margen), border (borde), padding (relleno), height (altura) y width (ancho) [00:00:32].
  • Inspección visual en el navegador: Se demuestra cómo utilizar la herramienta "inspeccionar" para visualizar el modelo de caja de un elemento específico mediante la sección de estilos computados [00:00:54].
  • Definición de Contenido (Width y Height): Se detalla cómo el contenido interno de una caja está definido por sus dimensiones de ancho (width) y alto (height) [00:01:28].
  • Padding, Border y Margin: Se diferencia el padding como el espacio interno, el borde como el límite del elemento y el margin como el espacio externo que separa el elemento de otros componentes [00:02:48].
  • Coordenadas de control: Se introduce la importancia de las coordenadas top (arriba), bottom (abajo), left (izquierda) y right (derecha) para manipular propiedades de forma específica [00:06:10].

Productos útiles para este curso

Para seguir esta clase, se recomienda el uso de un navegador web moderno con herramientas de desarrollo integradas (como Google Chrome o Firefox) y un editor de código funcional para implementar las propiedades de CSS mencionadas.

Resumen Final

El modelo de caja es fundamental para el diseño web, ya que dicta cómo se comportan los elementos dentro del navegador. Al dominar el uso de content, padding, border y margin, se adquiere la capacidad de controlar con precisión el espacio y la estructura de cualquier diseño. Esta lección sirve como base introductoria para los siguientes módulos del curso, donde se profundizará en el uso técnico y los valores de cada una de estas propiedades.

Créditos del Autor

Esta lección ha sido adaptada del contenido original creado por el canal, especializado en el desarrollo web y programación front-end. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.

26. CURSO de CSS - 26 ¿Que es el MODELO de CAJA en CSS? (BOX MODEL)

Contenido

Guarda tu progreso

Presiona Ctrl + D para favoritos.

Ver otros cursos