Não entendi como funciona e quando é utilizado o "box-sizing: border-box;"
Solucionado
Não entendi como funciona e quando é utilizado o "box-sizing: border-box;"
Oi, Felipe, tudo bem?
Define como a largura e a altura de um elemento são calculadas: devem incluir preenchimento e bordas ou não. Então, o que o border-box faz é definir se os valores dados a width e a height serão calculados dentro da caixa. Veja esse exemplo:
<html>
<head>
<style>
#example1 {
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid blue;
}
#example2 {
box-sizing: border-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid blue;
}
</style>
</head>
<body>
<h2>box-sizing: content-box (default):</h2>
<div id="example1"><p>380px</p></div>
<h2>box-sizing: border-box:</h2>
<div id="example2"><p>300px</p></div>
</body>
</html>No exemple1, que é modo padrão, será somado aos 300px de largura 20px de bordar (10px de direita e 10 de esquerda) + 60px de padding (30px da esquerda e 30px da direita) totalizando 380px. Com o box-sizing: border-box, no exemple2, todo esse comportamento é prevenido e deixando a caixa com os 300px de largura.
Na aluramais tem um vídeo explicando mais sobre como funciona o box-sizing: https://www.youtube.com/watch?v=Q33ojlocKc0&app=desktop
Se ficou alguma dúvida, é só falar!