Apliquei conforme o professor sugeriu na vídeo aula, porém não ficou muito bem esclarecido, gostaria de saber o "por que " de usar box-sizing. Grato pela atenção !
Solucionado
Apliquei conforme o professor sugeriu na vídeo aula, porém não ficou muito bem esclarecido, gostaria de saber o "por que " de usar box-sizing. Grato pela atenção !
hoje, com a Alura e o Google Gemini
Oi, Sandro, tudo bem?
A propriedade box-sizing 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!
Olá Laís muito obrigado pela atenção e solucionar a minha duvida. Basicamente seria "modelar "o tamanha da caixa dentro do conteúdo desejado. Muito obrigado mesmo !
obs: Feliz nata e ano novo!! haha