Imagine que o seu corpo é o "body" do seu site, e você quer garantir que tudo o que está dentro dele (os "filhos") fique perfeitamente acomodado, sem nada escapando pelas bordas. Isso é como definir a altura do seu corpo para ocupar 100% da altura da tela, usando a unidade "vh" (viewport height).
Agora, pense na sua casa. Você quer que tudo dentro dela (os móveis, decoração, etc) fique bem organizado e não ultrapasse os limites das paredes. Isso é como usar a propriedade "box-sizing: border-box", que faz com que o tamanho dos elementos leve em conta a borda e o padding, evitando que eles saiam dos limites do "pai" (a casa).
É como se você estivesse construindo um quebra-cabeça perfeito, onde cada peça (elemento) se encaixa perfeitamente no espaço disponível (o "body"). Dessa forma, você garante que nada fique de fora, tudo fica harmonioso e alinhado.
Então, podemos dizer que definir a altura do "body" para 100% da tela e usar o "box-sizing: border-box" são como as regras básicas de organização da sua casa ou de montar um quebra-cabeça - eles ajudam a manter tudo no seu devido lugar, sem nada escapando.das paredes. Isso é como usar a propriedade "box-sizing: border-box", que faz com que o tamanho dos elementos leve em conta a borda e o padding, evitando que eles saiam dos limites do "pai" (a casa).
É como se você estivesse construindo um quebra-cabeça perfeito, onde cada peça (elemento) se encaixa perfeitamente no espaço disponível (o "body"). Dessa forma, você garante que nada fique de fora, tudo fica harmonioso e alinhado.
Então, podemos dizer que definir a altura do "body" para 100% da tela e usar o "box-sizing: border-box" são como as regras básicas de organização da sua casa ou de montar um quebra-cabeça - eles ajudam a manter tudo no seu devido lugar, sem nada escapando.
