Al navegar por el sitio web, encontraremos que el contenido de la página está dividido según regiones. En la página, cada área tiene contenido diferente, de modo que aunque el contenido de la página web esté disperso, su diseño sigue siendo claro y organizado. Por ejemplo, el diseño del sitio web que se muestra en la Figura 1.
Figura 1 Diseño de sitio web
En la página del sitio web que se muestra en la Figura 1, estas áreas que albergan contenido se denominan modelos de caja. El modelo de caja trata los elementos de la página HTML como una caja cuadrada, que es un contenedor que contiene contenido. Cada cuadrado consta del contenido, el relleno, el borde y el margen del elemento.
Para comprender más vívidamente el modelo de caja CSS, primero comenzamos con la composición de las cajas de teléfonos móviles que son comunes en la vida. Una caja de teléfono móvil completa suele contener el teléfono, espuma acolchada y una caja de cartón para sujetar el teléfono. Si imagina un teléfono móvil como un elemento HTML, entonces la caja del teléfono móvil es un modelo de caja CSS, donde el teléfono móvil es el contenido del modelo de caja CSS y el grosor de la espuma acolchada es el margen interior del modelo de caja CSS. , y el grosor de la caja de papel es el borde del modelo de caja CSS, como se muestra en la imagen 2. Cuando se colocan juntas varias cajas de teléfonos móviles, la distancia entre ellas es el margen del modelo de caja CSS.
Figura 2 La composición de la caja del teléfono móvil.
Todos los elementos y objetos de la página web se componen de la estructura básica que se muestra en la Figura 2 y presentan un efecto de caja rectangular. Desde la perspectiva del navegador, una página web es el resultado de múltiples cuadros anidados uno dentro del otro. Entre ellos, el margen interior aparece alrededor del área de contenido. Al agregar un color de fondo o una imagen de fondo a un elemento, el color de fondo o la imagen de fondo del elemento también aparecerá en el margen interior. El margen exterior es la distancia entre los elementos y elementos adyacentes. Si define un atributo de borde para un elemento, el borde aparecerá entre el relleno y el margen.
Cabe señalar que aunque el modelo de caja tiene propiedades básicas como relleno, borde, margen, ancho y alto, no requiere que cada elemento defina estas propiedades.