para que sirve el <code>box-sizing: border-box; </code>

sirve para incluir padding y margin en el calculo de las dimensiones del objeto. Por ejemplo, si tenemos:

<div id="morado"></div>

y le aplicamos:

#morado {
    width: 200px;
    height: 200px;
    background-color: purple;
    padding: 10px;
    border: 10px solid black;
}

en realidad el div no mide 200x200, pues no considera el padding ni el borde. Antes: Con border y padding: en cambio si aplicamos box-sizing: border-box, el padding y el borde se incluirán en el cálculo de las dimensiones del contenedor. Así, en la ultima imagen todo mediría 200x200, mientras que en el anterior sería 240x240 a pesar que declaramos que queríamos 200x200

excelente explicación