Qual é a diferença entre box-sizing: content-box e border-box?

A diferença entre box-sizing: content-box e box-sizing: border-box reside na forma como o navegador calcula as dimensões totais do elemento:

• content-box (valor padrão): a largura e a altura especificam apenas o conteúdo. A esses tamanhos, adicionam-se as margens internas (padding) e as bordas (border), aumentando o tamanho final do elemento.

• border-box: a largura e a altura incluem o conteúdo, o padding e a borda. Ou seja, o padding e a border "cabem" dentro das dimensões definidas.

Exemplo:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* ou border-box */
}

• Com content-box, a largura total será: 200 + 102 + 52 = 230px.
• Com border-box, a largura total permanecerá 200px, e o conteúdo será reduzido para acomodar o padding e a border.

Usar border-box costuma ser mais conveniente para o layout, pois as dimensões dos elementos não "incham" devido ao padding e à border.