Header Ads Widget

Ticker

6/recent/ticker-posts

¿Qué es el modelo de caja CSS?

 


El modelo de caja CSS es el medio principal de diseño para todo en la web. Es un estándar creado por el World Wide Web Consortium que describe el diseño como cuadros rectangulares en html que rodean cada elemento en una página web o en el árbol del documento. Con el modelo de caja, los diseñadores y desarrolladores web pueden hacer uso de varias propiedades como relleno, bordes, margen superior, margen derecho, margen inferior, margen izquierdo y muchas otras para crear diseños de página. En este tutorial, veremos más de cerca el modelo de caja CSS y por qué es tan importante.


¿Cuál es el propósito del modelo de caja CSS?

El propósito del modelo de caja CSS es definir todos los elementos como una caja. En otras palabras, todo es una caja. Chris Coyier de CSS Tricks describe entender este concepto de que cada elemento en el diseño web es una caja rectangular fue un verdadero "momento ah-ha " para él. Una vez que tenga en mente el concepto de este hecho, puede comenzar a utilizar el enfoque del modelo de caja con la mentalidad adecuada.


¿Por qué es importante el modelo de caja CSS?

Si alguna vez ha estado creando un diseño de página para la web y se encontró haciendo todo tipo de cálculos matemáticos para averiguar qué tan ancho o alto puede hacer las cosas y hacer que se comporten correctamente en la página, entonces ha encontrado lo que significa lidiar con el modelo de caja. Es importante comprender cómo los márgenes, los bordes, el relleno y el contenido trabajan juntos para crear el diseño de los elementos de la página.


El modelo de caja: contenido, relleno, borde, margen

Ahora que sabemos que todo es un cuadro (incluso un cuadro alrededor del texto), deberíamos saber cómo podemos definir el espacio entre elementos, cómo definir el espacio entre el contenido y cómo crear diferentes tipos de bordes alrededor de los elementos. Puede pensar en una caja como algo que viene de Amazon y llega a su puerta. Dentro de la caja hay un artilugio genial (el contenido), probablemente rodeado por un acolchado protector (el acolchado). Quizás se entregaron dos cajas y están una al lado de la otra con un pequeño espacio entre ellas. Este es el margen. ¡Esto es como el modelo de caja CSS!

  • Contenido: Dentro de la caja, está su contenido. Por supuesto, esto puede ser texto simple, imágenes u otros tipos de medios.
  • Relleno: el relleno es lo que agrega espacio entre el contenido y el borde de la caja. El relleno se puede agregar a cualquier lado del contenido, como la parte superior, derecha, inferior e izquierda. El relleno es transparente, por lo que permitirá que los colores de fondo sean visibles si los hay.
  • Borde: el borde rodea el contenido y el relleno. Puede configurarse como punteado, discontinuo, sólido, doble, surco, cresta, recuadro, principio, ninguno u oculto. También puede tener esquinas redondeadas si lo desea. La clave para recordar es que el borde está entre el relleno y el margen del elemento y generalmente es opaco para cubrir cualquier color de fondo que pueda estar presente.
  • Margen: Margen es la propiedad que da espacio entre elementos . También se puede aplicar en la parte superior, derecha, inferior e izquierda según lo requiera el diseño. Curiosamente, la propiedad de margen puede recibir un valor negativo para técnicas de colocación interesantes o establecerse en automático para márgenes automáticos.

Relleno Vs Margen

Puede ser fácil confundir el relleno y el margen, ya que ambos dan el efecto de agregar espacio. Pero, ¿dónde están agregando espacio estas propiedades? Un consejo para ayudar a recordar cuál es cuál, es que si te encuentras diciendo "Necesito más antecedentes", entonces probablemente necesites algo de relleno. El relleno deja pasar el color de fondo. Si cree que necesita espacio entre las casillas, entonces es cuando entra en juego el margen. El margen está fuera del borde, mientras que el relleno está dentro del borde.


Sintaxis de relleno y margen

La sintaxis tanto para el relleno como para el margen es similar. Muchas veces ves cuatro valores uno al lado del otro, así:

Ahora puedes mirar eso y decir, ¿qué valor numérico tiene qué efecto? Hay dos formas de recordar esto. Este primero es con un acrónimo de TRBL . Esto significa Arriba , Derecha , Abajo e Izquierda . Entonces, el ejemplo anterior tiene 5 píxeles de relleno en la parte superior, 8 píxeles en la derecha, 3 píxeles en la parte inferior y 4 píxeles en la izquierda. Lo mismo ocurre con el margen. Hay algunas opciones abreviadas para esto, pero la única que me gusta es poner un solo valor que se aplique por igual a los cuatro lados.

La otra forma de recordar es pensar en un reloj y moverse en el sentido de las agujas del reloj.
sintaxis de margen y relleno


Colapso automático de márgenes

Una gran diferencia entre el relleno y el margen es que los márgenes se colapsarán automáticamenteEn otras palabras, los márgenes superior e inferior de los bloques pueden superponerse en un área de margen única donde el tamaño es el mayor de los márgenes individuales. Si tienen el mismo valor de margen en cada elemento, entonces se usa ese valor: * no * se suman.

colapso automático del margen del modelo de caja

Al mirar el ejemplo anterior, es posible que tenga la tentación de pensar que, si tengo un margen de 50 px en ambos elementos y están apilados uno encima del otro, entonces el resultado debería ser una distancia de 100 px entre ellos. Este no es el caso gracias al colapso automático de márgenes. He aquí otro ejemplo.

los márgenes colapsarán


¿Qué valores se asignan a las propiedades del modelo de caja?

Entonces, todo es un cuadro, y cada cuadro tiene contenido, relleno, borde y margen. ¿Qué valores se asignan a estas propiedades? Serían unidades de longitud como:

  • %: Un ancho de bloques como 50%.
  • em: El valor de altura calculado del tamaño de fuente del elemento.
  • Ej .: La altura del carácter "x", también conocida como altura x de la fuente.
  • rem: El tamaño de fuente de <html> que evita problemas de herencia con em.
  • vw: un porcentaje del ancho de la ventana gráfica.
  • vh: un porcentaje de la altura de la ventana gráfica.
  • vm: el valor más pequeño de vw y vh.
  • px: píxeles CSS.
  • cm: Centímetros.
  • mm: Milímetros.

Diagrama del modelo de caja CSS

A continuación se muestra el diagrama del modelo CSS BoX que muestra la jerarquía. De hecho, si abre las herramientas de desarrollo en Google Chrome o Mozilla Firefox, cada una tiene una representación visual del modelo de caja que se actualiza para cada elemento que puede inspeccionar en la página. ¡Ver! ¡Todo es realmente una caja!
Modelo de caja CSS


Ejemplo de modelo de caja CSS

Veamos si podemos crear una representación del modelo de caja CSS en la página usando todas las propiedades que hemos aprendido hasta ahora.

box-model.html


Inspeccionando el modelo de caja en Google Chrome

inspector de modelos de caja de google chrome


Inspección del modelo de caja en Mozilla Firefox

inspector de modelos de caja de firefox


Mostrar en línea frente a bloque frente a bloque en línea

En general, cuando se trata de diseños que utilizan el modelo de caja, se trata de elementos a nivel de bloque . ¿Qué son los elementos a nivel de bloque? Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho de la ventana del navegador. Los elementos de nivel de bloque son <p> , <h1> , <h2> , <h3> , <h4> , <h5> , <h6> , <ol> , <ul> , <pre> , <address> , < blockquote> , <div> , <fieldset> , <form> ,<tabla> .

Las cajas de nivel de bloque son perfectas para establecer dimensiones utilizando las propiedades de ancho y alto. Sin embargo, en general, establecer una altura en un elemento que contiene texto o cualquier tamaño usando unidades relativas a la fuente es una mala idea. La razón es porque puede crear contenido oculto con barras de desplazamiento en el elemento, lo que parece falso. En cualquier caso, los siguientes son los puntos clave de los elementos a nivel de bloque.

Elementos de nivel de bloque

  • En general, los elementos de bloque son más grandes.
  • Empiece en una nueva línea.
  • Puede contener elementos en línea y otros elementos a nivel de bloque.
  • Actúan como bloques de construcción estructurales.
  • Tan ancho como elemento contenedor.
  • La altura se ajusta para adaptarse al contenido proporcionado.

Los elementos en línea son diferentes porque pueden aparecer varias veces en la misma línea. No comienzan en una nueva línea y solo toman el ancho necesario. Además de los elementos en línea, también tenemos elementos de nivel de bloque en línea para agregar otra capa de complejidad. La forma más fácil de ver la diferencia entre display: inline, display: block y display: inline-block, es mirar un ejemplo. En este fragmento a continuación, asignaremos el mismo ancho, alto y margen a cada uno de los tipos de visualización.

Aunque cada par de elementos tiene el mismo ancho, alto y margen, el diseño resultante en la página es bastante diferente. Tenga en cuenta que en el elemento en línea, tanto el ancho como el alto se ignoran por completo. En el elemento de nivel de bloque, se respetan todas las propiedades y cada elemento comienza en una nueva línea. Por último, el elemento de bloque en línea parece funcionar casi como el elemento de nivel de bloque con la diferencia de que no es necesario que comience en una nueva línea. Entonces, si desea crear bloques como cajas pero mantenerlos en la misma línea, puede usar la propiedad inline-block.
elementos de nivel en línea vs bloque vs en línea-bloque


Cálculo de anchos y alturas en el modelo de caja

Si está listo para volverse loco, hablemos sobre cómo calcular correctamente los anchos y alturas totales de los elementos en la página utilizando el modelo de caja. La altura y el ancho de un cuadro CSS es el tamaño de su contenido. Sin embargo, además de esto, debe tener en cuenta el relleno, los márgenes y los bordes, si los hay. Es probable que esta sea la causa de los problemas si espera un diseño basado en las dimensiones que proporciona en CSS frente al resultado real en la página web. He aquí cómo calcular.

  • margin-left + border-left-width + padding-left + width + padding-right + border-right width + margin-right = El ancho total .
  • margin-top + border-top-width + padding-top + height + padding-bottom + border bottom- width + margin-bottom = La altura total .
  • Ejemplo de cálculos de modelo de caja

    Imagine que desea crear tres cuadros de nivel de bloque en una página, y desea que ocupen la misma cantidad de ancho para que, sin importar qué tan delgada o ancha sea la página, cada cuadro siempre tendrá exactamente 1/3 del ancho y estar en la misma línea que los demás. Primero, veamos el marcado html para este ejemplo. Cosas bastante simples. Tenemos tres elementos div dentro de un elemento div envolvente y algo de contenido dentro de cada "caja".

    Aquí está el CSS para nuestro ejemplo.

    Lo importante a tener en cuenta en este punto es que tenemos el flotador a la izquierda en todas las casillas. Además, cada caja tiene exactamente un 33,33333% de ancho. Esto significa que, si tiene tres cajas como las nuestras, cada una debería ocupar la misma cantidad de espacio una al lado de la otra. Sin embargo, compruebe lo que está sucediendo en el navegador.
    ejemplo de cálculo de modelo de caja

    Sí. Tal como (no) esperarías. Tenemos dos cajas en una línea, y la tercera simplemente pasa el rato en su propia línea. ¿Entonces qué pasó? Bueno, en la clase .box, tenemos un relleno de 20px además de un borde de 10px. En el modelo de caja, ¡aún debe tener en cuenta estos valores! Entonces dices, ok, seguiré adelante y quitaré el relleno y el borde. Mira lo que pasa entonces.
    bloque flotante a la izquierda sin relleno sin borde

    Así que eso funcionó. Tienes tus cajas en la misma línea, pero el aspecto está desordenado. Perdiste tu acolchado y también perdiste el borde liso. ¡¿Qué hacer?!


    tamaño de caja: caja de borde;

    ¡Adelante, vuelva a poner esos bordes y relleno en sus cajas! Una vez que esté completo, haremos un pequeño ajuste en nuestro archivo CSS. En el área del selector universal vamos a hacer uso de la propiedad box-sizing y establecer su valor en border-box.

    ¿Qué hace esto? Le dice al navegador que cuando está configurando el diseño en la página, el relleno y el borde serán parte del ancho total. Por lo tanto, esto simplifica sus cálculos y ayuda a obtener el diseño deseado. Ahora que hemos realizado el cambio de tamaño de caja, veamos el resultado.
    ejemplo de cuadro de borde de tamaño de caja


    Diversión con fronteras

    Los bordes se pueden diseñar de muchas formas diferentes. Solo para recapitular, los bordes son el área entre el margen y el relleno. Como tal, puede crear efectos de contorno que rodeen cualquier elemento. Se puede aplicar un borde usando widthstylecolorEsto equivale a border-width , border-style , y border-color . Los tipos de borde más utilizados son punteado, discontinuo, sólido, doble, surco, cresta, recuadro y principio.
    tipos comunes de estilo de borde


    También puede agregar color a sus bordes.

    colores de tipos de bordes comunes

    En los ejemplos anteriores, usamos un pequeño y agradable diseño de cuadrícula CSSAquí está el HTML y CSS para la versión gris.


    Los bordes pueden ser de una cara

    Los diseñadores web tienen la opción de asignar un borde a la parte superior, derecha, inferior o izquierda de un elemento de forma similar a como se puede asignar un margen o relleno a un solo lado. De hecho, puede combinar lados pero dejar otros para obtener un efecto interesante también. Para ello se puede utilizar border-topborder-rightborder-bottom, y border-leftAquí hay un ejemplo divertido en el que mezclamos y combinamos diferentes estilos y colores de bordes en un elemento.

    diferente estilo de borde en cada lado


    ¡Redondea esas esquinas!

    La propiedad border-radius es una herramienta genial que te permite crear efectos geniales y esquinas redondeadas en tus cajas. En un momento dado, las esquinas redondeadas estaban tan de moda que casi no se podía distinguir entre un cuadrado y un círculo. Aquí simplemente nos basamos border-radius: 20px;en nuestro ejemplo de los distintos estilos de borde.
    ejemplo de radio de borde esquinas redondeadas

    Al igual que la mayoría de las propiedades en el modelo de caja, puede controlar los cuatro lados o, en el caso del radio del borde, las cuatro esquinas. Existen técnicas de taquigrafía, pero lo más fácil de recordar es que al especificar los cuatro valores, el radio se aplicará a las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda. Aquí hay un ejemplo en el que aumentamos el radio del borde a la friolera de 75 píxeles para demostrar el efecto.
    borde-radio-redondeo de cada esquina por separado


    ¿Qué es el resumen del modelo de caja CSS?

    • Todos los elementos HTML de una página web pueden verse como cuadros.
    • En CSS, el término modelo de caja se refiere al diseño y la disposición.
    • El modelo de caja consta de: márgenes , bordes , relleno y el contenido real .
    • Podemos cambiar la altura y el ancho de los elementos (cajas).
    • El modelo de caja nos permite definir el espacio entre elementos.
    • El modelo de caja nos permite agregar bordes alrededor de los elementos.



    Publicar un comentario

    0 Comentarios