Não entendi muito bem como funciona a propriedade box-sizing apresentada na aula, acho que ficou um pouco corrido. Alguém poderia detalhar um pouco melhor o funcionamento dela? Obrigado!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Não entendi muito bem como funciona a propriedade box-sizing apresentada na aula, acho que ficou um pouco corrido. Alguém poderia detalhar um pouco melhor o funcionamento dela? Obrigado!
Opa Paulino, espero que esteja bem.
Por padrão, o cálculo das dimensões widthe heightsão medidas incluindo só o conteúdo interno da caixa, mas não o padding, border ou margin. Sendo assim, o cálculo desses outros elementos estão fora da box de conteúdo.
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. Foi o que ocorreu no exemplo da aula, que são 3 elementos com width: 30%, padding: 30px 20px e border-width: 2px.
Dessa forma, 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. Com isso, a propriedade box-sizing: boder-box torna muito mais fácil dimensionar os elementos.
Caso queira saber mais, segue algumas indicações de leitura:
Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!
Muito obrigado pela resposta!