Para que serve o box-sizing: border-box?

Olá Livio, tudo bem?

Por padrão, o cálculo das dimensões de larguras(width)e alturas(height)dos elemento são atribuídos apenas a caixa de conteúdo desse elemento e é isso que é levado em consideração pelo navegador.

Então, quando existem elementos com bordas e margens do lado direito e esquerdo, eles não caberão nas restrições de tamanho do container pai que eles estão inclusos. Isso ocorre no exemplo da aula, que são 3 elementos com width:30%, padding: 30px 20px e border-width: 2px.

Sendo assim, a propriedade box-sizing: border-box é utilizada para alterar esse padrão de cálculo das larguras e alturas dos elemento, ou seja, ela informa ao navegador que é necessário levar em conta as bordas e margens nos valores que você especificar para a largura e altura de um elemento.

O resultado disso é que se você definiu um elemento com uma width:30%, esses 30% agora irão incluir o padding: 30px 20px e border-width: 2px, e consequentemente a caixa de conteúdo será reduzida para absorver essa largura extra que foi adicionada. Dessa forma, a propriedade box-sizing: boder-box torna muito mais fácil dimensionar os elementos.

Caso queira saber mais, segue algumas indicações de leitura:

• Alura - Box Model e o Box Sizing
• MDN - Box Sizing
• W3Schools - Box Sizing

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!