soy Kseso y esto EsCSS

Css Box model: El concepto y los 3 modelos de caja en Css

Css Box model: El concepto y los 3 modelos de caja en Css

·Por Kseso ✎ 9

El concepto de caja (box en inglés) es básico para entender el funcionamiento de Css. Y lo que nunca se debería hacer es sustituir esa expresión por el de "capa", pues sólo hay un caso en el ámbito de Css donde se hace uso de la palabra "capa": una abstracción o ámbito virtual creado por algunas propiedades para aplicarse, como

...si exceptuamos la nueva propuesta de las Css shaders.

El concepto de caja

box model css

En el Html todos los elementos generan/son una caja que los encierra o contiene y sobre el que actúan los estilos. Así es desde una simple letra en medio de la página hasta la etiqueta raíz <html>. Lógicamente las particularidades de cada caja varían en función del tipo de elemento que sea (básicamente de block o inline), también las propiedades Css que admiten y el cómo se relacionan o influyen con las otras cajas adyacentes.

A efectos de funcionamiento, por ejemplo, cada vez que escribes un texto lo que estás haciendo, para css, es poner una cajitas al lado de otra:

█ ⌷ ⌷ ⌷ ⌷ ☐ ☐ ☐

Y ahora sí, ya le puedes decir que las separe más o menos (letter-spacing), que a la primera le haga esto o lo otro (:first-letter) o incluso diferenciar la primera línea del párrafo (first-line). Esta analogía es válida para cualquier otro elemento.

Los 3 modelos de cajas (box model) en Css

Una vez establecido este concepto, lo siguiente que hubo que hacer fue definir unas reglas para la constitución de estas cajas. O dicho de otra forma, definir un modelo de caja común para todos, estandarización que se llama, que facilitase que el mismo código diese el mismo resultado con independencia del agente de usuario que lo procesara.

El modelo de caja estándar o box model

La especificación lo que definió fue que el tamaño total del elemento en la horizontal fuese la suma de su anchura (width) más los padding, border y margin laterales. Y en la vertical por su altura (height) y las mismas propiedades superiores e inferiores.

Esta forma es la que se conoce como box model o modelo de caja estándar. Recalca lo de estándar porque fue como se acordó e implementó por todos los navegadores excepto uno. Sí, el de siempre. Microsoft con sus ie´s fue por libre. Y suele/solía ser fuente de problemas. Más cuando coincidía con algún bug como el doble margen lateral.

Con independencia de que sea más o menos intuitivo o de gustos y opiniones personales, es así.

Este modelo en ciertas situaciones complica algo el construir el layout cuando se definen cajas con anchuras en medidas relativas con sus padding, border y margin.

Box-sizing: alteración del modelo estándar

Un poco de historia (año 2.002) sobre esta propiedad de la mano del W3c

La propiedad 'box-sizing' fue propuesta por primera vez para proporcionar una vía de actualización para ciertos navegadores que interpretaron 'width' de forma equivocada. 'Box-width' y 'box-height' se proponen como versiones mejoradas de 'box-sizing".

box model cssRegresando al presente y al documento "CSS Basic User Interface Module Level 3 (CSS3 UI)" que es donde se define esta propiedad.
Con ella podemos modificar el modelo de caja estándar y redefinir qué queda dentro del width/height.

Box-sizing se puede declarar a todos los elementos que admiten la propiedad width/heigth y en los medios (media) visuales. No se hereda.

Los valores posibles son:

content-box

Este es el comportamiento del 'width' y el 'height' como se especifica en CSS2.1 (modelo estándar). El 'padding' y el 'border' del elemento se dibujan por fuera de la anchura y altura especificadas (se suman).

Padding-box

Nota: este valor está marcado como value at risk. y Firefox ya ha anunciado que dejará de soportarlo.

El 'padding' se dibuja dentro. Esto es, a la anchura y altura declaradas se les resta el relleno. Así, si en una caja con este valor (padding-box) defines width: 100px y padding: 0 10px la anchura de la caja será de 80px pues el relleno se dibuja dentro. Se resta del 'width'.

Border-box

El relleno y el borde se dibujan dentro del ancho y alto. Esto es, al calcular el tamaño final de la caja, el 'padding' y el 'border' se restan del 'height' y el 'width'.

Inherit

El elemento toma el valor declarado de box-sizing a su padre o ancestro más próximo.

Ten presente que en el caso de que el valor resultante sea negativo se redondea a 0 (cero). Esto es, si la suma del borde y el relleno es mayor del width (o height) declarado, el valor final de 'width' será cero.

Observa que el margen siempre queda fuera, con cualquiera de los dos modelos de caja. Box-sizing no permite dibujarlo dentro del width/height.

Lo más habitual es utilizar el valor border-box. Y en muchos casos te encontrarás en los layouts prefabricados una declaración del siguiente tipo para implementar este modelo de caja de forma general a todos los elementos:

*, *:after, *:before { /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */ -webkit-box-sizing: border-box; /* Firefox (desktop or Android) 28- */ -moz-box-sizing: border-box; /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */ box-sizing: border-box; }

En la actualidad, la forma aceptada de declarar este modelo a un documento es ligéramente diferente. Fruto de Jon Neal:

*, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; } /* Añade los prefijos que necesites */

Consulta el soporte de los navegadores a box-sizing:

Soporte box-sizing

Artículos para ampliar, además de la especificación del W3C:

  1. Mozilla Developer
  2. Polyfill para IE (github)
  3. Artículo del blog 456bereastreet.
  4. Artículo de Css-Tricks.
  5. Ejemplo y demo en español

Para que notes la diferencia de forma visual entre el modelo estándar y el box-sizing. Compara las dos reglas Css del código siguiente y el resultado que se obtendría en la imagen de abajo:

.box-model { width: 100px; height: 50px; margin: 10px; border: 10px; padding: 10px; }
.box-sizing { box-sizing: border-box; width: 100px; height: 50px; margin: 10px; border: 10px; padding: 10px; }

Y por supuesto que a ambas se le pueden seguir declarando el resto de propiedades: position, float, display...

Flex-box o modejo de caja flexible

Actualización:
Tienes disponible este extenso artículo sobre el flexbox según la propuesta actual del consorcio (nueva nomenclatura, sintaxis y propiedades): El nuevo Flexbox: flexible box model o modelo flexible de caja. Su layout.

Las principales características que definen al flexbox o modelo de caja flexible y que marcan la diferencia respecto a sus precedente podrían resumirse en:

  • El orden de colocación de los items en la pantalla es independiente del orden de aparición en el Html.
  • Los items se liberan de la tiranía de la propiedad direction y unicode-bidi. Esto es:
    • La noción de ejes X e Y y su obligado seguimiento queda superado.
    • La capacidad de alterar los tamaños de los elementos para rellenar mejor el espacio disponible en cualquier dispositivo de visualización. Una caja flexible expande sus items para llenar el espacio libre disponible, o los reduce para que no haya desbordamientos.
  • Otras que tú mismo descubrirás tras jugar con él.

Como ves, la diferencia entre un modelo y su variación se reduce a qué se coloca dentro o fuera del width/height de un elemento. Práctico en algunas ocasiones, la filosofía del modelo es la misma.

El comportamiento e influencia de una caja sobre sus hermanos y ancestro es la misma con box-sizing o sin él.

La verdadera revolución en el modelo de caja es la nueva propuesta del flex-box o modelo de caja flexible. Es tan diferente respecto a lo que había en Css hasta su llegada y rompe e introduce tal cantidad de novedades, posibilidades y maneras de hacer las cosas que son miles los artículos que la comunidad le ha dedicado.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso