TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Tutorial de modelo de caja CSS

3

CSS es una excelente herramienta para el diseño web front-end. La popularidad no se debe solo a la facilidad de uso, sino también a las robustas funcionalidades. CSS afecta a cada elemento de una página web. Por lo tanto, todo diseñador web que sea un desarrollador central de diseñadores de diseño simples debe conocer los conceptos básicos de CSS. El modelo de caja en CSS es la base para definir diseños y posicionamiento de elementos en una página. En este artículo exploraremos los conceptos básicos del modelo de caja CSS en detalle. Además, también cubriremos cómo analizar el modelo de caja de un elemento en un navegador.



¿Qué es el modelo de caja CSS?

Cuando se usa CSS, cada elemento HTML de una página web se considera un cuadro rectangular. Por tanto, el concepto se denomina modelo de caja. Esto ayuda a definir fácilmente el diseño de una página web y colocar los elementos para alinearlos según lo necesite. En el modelo de caja, el contenido de un elemento HTML se coloca en el centro y seguido de relleno, borde y margen como se muestra a continuación:

Tutorial de modelo de caja CSS

Elemento de modelo de caja CSS

  • Margen: esta es el área alrededor del borde y siempre es transparente. El propósito del margen es proporcionar el espacio necesario entre los elementos y desde los bordes del navegador.
  • Borde: esta es una línea visible alrededor del contenido y el área de relleno. Generalmente se usa para proporcionar un contorno a un elemento y puede tener cualquier color y ancho.
  • Relleno: el espacio entre el contenido real y el borde se denomina relleno. Cuando el contenido tiene líneas de borde visibles, es apropiado tener algo de relleno. Esto ayudará a crear espacio entre el contenido y el borde.
  • Contenido: contenido real como texto e imagen entre etiquetas HTML.

Relacionado: Tutorial de unidades CSS para principiantes.

Ejemplo de elemento de modelo de caja

Hagamos un ejemplo simple de creación de un párrafo dentro de etiquetas div para explicar el concepto de modelo de caja. El CSS debería verse como a continuación:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; } </style>

Tenga en cuenta que el código CSS para margen y relleno contiene dimensiones para la parte superior, izquierda, inferior y derecha, respectivamente.

Y el HTML para insertar el contenido con el css anterior es:

<div class="box-model"> <p>This is a test content to explain how CSS box model will look like. This is a paragraph with different padding, different margin and border of 10px.</p> </div>

La salida del código anterior se verá como a continuación en el navegador. Como se mencionó, el margen no se puede ver porque es transparente.

Tutorial de modelo de caja CSS

Visualización del modelo de caja CSS de un elemento en el navegador IE 11

¿Cómo verificar el modelo de caja CSS en un navegador?

Es una buena idea ver la teoría de una manera práctica. Puede ver el modelo de caja CSS de un elemento directamente desde su navegador web. Aquí mostramos la captura de pantalla con el navegador Google Chrome. El método sigue siendo el mismo para todos los demás navegadores como Firefox, Edge y Safari.

  • Abra cualquier página web y haga clic con el botón derecho en el elemento que desea explorar.
  • Puede hacer clic derecho en cualquier texto, imagen, video o espacio en blanco.
  • Elija la opción "Inspeccionar elemento" para abrir la consola del desarrollador.
  • Tiene un panel izquierdo para ver HTML y un panel derecho para ver CSS.
  • Puede ver el modelo de caja CSS del elemento elegido en la pestaña "Diseño" del panel derecho.
  • Consultando el código de ejemplo anterior, todos los bordes, márgenes y rellenos coincidirán con las dimensiones exactas definidas en el CSS.

Tenga en cuenta que puede ver el marcado HTML de un elemento en el navegador Google Chrome en la pestaña "Elementos". El CSS y el modelo de caja correspondientes se pueden ver en la pestaña "Estilos", como se muestra en la imagen de abajo.

Tutorial de modelo de caja CSS

Visualización del modelo de cuadro CSS de un elemento en el navegador Chrome

Cálculo de la anchura y la altura de un elemento en el modelo de caja CSS

Ahora que ha entendido el concepto de modelo de caja CSS. Siempre que se defina la altura y el ancho de un elemento, el ancho total y la altura total de ese elemento deben incluir el margen, el relleno y el ancho del borde. Agreguemos alto y ancho al ejemplo de código CSS anterior:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; width: 300px; height: 200px; } </style>

Artículos relacionados:


Ahora, cualquier elemento que llame al estilo de la clase CSS “modelo de caja" debe colocarse con el siguiente ancho y alto total.

  • Altura total = Altura + Margen superior + Margen inferior + Relleno superior + Relleno inferior + Ancho del borde = 200 + 30 + 5 + 10 + 10 + 10 = 265px.
  • Ancho total = Ancho + Margen izquierdo + Margen derecho + Relleno izquierdo + Relleno derecho + Ancho del borde = 300 + 15 + 5 + 0 + 5 + 10 = 335px.

El diseño completo de la página se diseñará considerando las dimensiones de ancho total y altura total de cada elemento.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More