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!
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!