[Dúvida] Box Sizing

Olá, Levi! Tudo bem?

Entendo que o conceito de Box Sizing pode ser um pouco confuso no início, mas vou tentar te explicar de forma mais clara.

O Box Sizing é uma propriedade do CSS que define como o tamanho total de um elemento é calculado. Por padrão, o tamanho de um elemento é calculado considerando apenas o conteúdo interno, excluindo as bordas e o preenchimento. No entanto, ao utilizar o valor "border-box" para o Box Sizing, o tamanho total do elemento é calculado incluindo as bordas e o preenchimento.

Quando você menciona "calcula toda a tela", acredito que esteja se referindo ao fato de que o Box Sizing afeta o tamanho de um elemento em relação ao seu conteiner. Por exemplo, se você definir um elemento com uma largura de 100% e utilizar o valor "border-box" para o Box Sizing, o elemento ocupará toda a largura do seu conteiner, incluindo as bordas e o preenchimento.

Portanto, o Box Sizing não calcula toda a tela, mas sim o tamanho de um elemento em relação ao seu conteiner.

Espero ter ajudado a esclarecer sua dúvida! Se tiver mais alguma pergunta, é só me dizer.

Tem um artigo detalhando isso melhor https://www.alura.com.br/artigos/entendendo-como-funciona-box-model-e-o-box-sizing

Mas, basicamente, o box-sizing se refere a como o tamanho de cada elemento será calculado. No html, cada elemento renederizado é um box (uma caixinha). E por isso, se fala em box-model. Ou seja, cada elemento é uma box onde podemos aplicar valores para o conteúdo, padding e margin (que é o que compõe o box-model).

Por padrão, o box-sizing do browser é o content-box. Ou seja, a referência para o tamanho da "caixinha" a ser renderizada será o conteúdo. Se você definir uma div com width: 200px e margin de 20px e padding de 20px. A largura total utilizando o box-sizing: content-box será de 200px (conteúdo) + 20px (padding) + 20px(margin). Pois, ele considera apenas o conteúdo da div (sem somar o padding e o margin). E isso é "problemático" porque quando você definiu a width com 200px sua expectativa é que ela ocupe 200px. Mas ela irá ocupar mais devido ao margin e o padding.

Mudando o box-sizing para border-box, ele passará a considerar o margin e o padding nessa conta e então o elemento final terá 200px (contando já com o margin e padding). Dessa maneira, fica mais previsível saber o tamanho final do elemento. Por isso, é mais fácil mudar o modelo de box-sizing para border-box.