Box-sizing: Content-box

Como podemos ver a continuación

El tamaño en píxeles fija el aspecto aunque cambiemos al ancho o alto de la pantalla
El ancho y el alto que proporcionamos es el del contenido. Hay que sumarle un pixel por cada borde

Contenido :Texto interno a h1

Sección con tamaño del contenido únicamente (content-box)

Sección con tamaño del contenido únicamente (content-box)

El ancho de la sección tiene que medir 1004px para que quepan las dos cajas.

El tamaño en píxeles fija el aspecto aunque cambiemos al ancho o alto de la pantalla
El ancho y el alto que proporcionamos es el del contenido.Hay que sumarle padding+márgenes+borde, por lo que no tenemos la cuenta hecha a priori. El ancho de la caja es 500 + 2*50 (padding)+2*1 (borde)+2*50 (margen)=702. El alto de la caja es 200 + 2*50 (padding)+2*1 (borde)+2*50 (margen)=402.
Aunque el tamaño especificado ha sido el mismo que en la caja anterior, como hemos añadido margin y padding, el tamaño del elemento ha cambiado, por lo que se nos descuadra el layout.
Como las cajas han crecido de tamaño al ponerles margin y padding, ahora ya no nos caben una al lado de la otra y se nos "cae".

Sección con tamaño de la caja hasta el borde.

Sección con tamaño de la caja hasta el borde.

El tamaño en píxeles fija el aspecto aunque cambiemos al ancho o alto de la pantalla
Todos los tamaños especificados hacen referencia al tamaño incluyendo el borde y el padding
Por tanto, tenemos claro que el tamaño de la caja es el valor exterior, y podemos planificar nuestro layout

Ahora podemos ver que miden exactamente 1000 px de ancho y nos sobran los cuatro de los bordes que necesitábamos en el primer ejemplo.
Sin embargo, la caja queda muy justa alrededor del texto, por lo que quedaría mejor ponerle un margin y un padding.

El tamaño en píxeles fija el aspecto aunque cambiemos al ancho o alto de la pantalla
No tenemos idea de cuánto puede ocupar el título de alto así que la altura de la caja h1 no cuadra bien con el tamaño del texto
Todos los tamaños especificados hacen referencia al contenido, no a la caja total
AL tener fijado el elemento de la caja y añadir margin y padding ahora el texto se nos sale de la caja.

Podemos observar que sigue ocupando 1000px de ancho y seguimos manteniendo dos cajas en una fila.
Al añadirle margin y padding, el texto se ve mejor.
Esto nos permite crear layouts bien definidos.