Eu observei que o valor do box sizing foi mudado dentro das configurações da tag body, e no exemplo que foi dado a mudança é feita dentro da tag filho. Fiz uns testes e realmente não entendi porque a tag foi colocada dentro de body, aparentemente não muda nada.
Gostaria de uma explicação mais detalhada de como essa propriedade funciona.
a tag box-sizing: border-box; e ultilizada na tag "body" para que tudo que tenha dentro da do body respeite as regras de caixas.
se voce criar uma "div" com width: 600px; height: 400px e colocar uma "imagem" dentro dessa com uma dimensão maior que a da "div" ex: 1900x890 " e na classe dessa "div" voce colocar um width: 100%; a imagem não vai passar do tamanho da DIV que é de 600px respeitando a o box.
caso tenha duvida ainda.
de uma olhada nesses exemplos deste site!
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
tem uma imagem ilustrando o tipo de codigo :)
espero ter ajudado!
Obrigado pela resposta. Bom, dando uma olhada melhor já entendi como funciona a propriedade, a questão é como disse antes, aparentemente colocar "box-sizing: border-box" dentro do body é inútil. Vou colocar o exemplo aqui embaixo pra ilustrar melhor:
Criei uma div com o tamanho 600px de largura e 400px de altura. Coloquei uma imagem dentro e configurei para que ela ocupasse 100% da div. Até aí tudo bem, mas criei uma borda para a imagem de 20px, e ela ultrapassou o tamanho da div. Coloquei "box-sizing: border-box" dentro das configurações da tag body. Segundo o que foi falado, teoricamente isso resolveria o meu problema, mas não foi o caso. A imagem só respeitou o box sizing quando coloquei "box-sizing: border-box" dentro das configurações do elemento filho, que no caso foi a imagem.
Encontrei outro jeito de aplicar essa configaração a todos os elementos:
* {
box-sizing: border-box;
}
Dessa forma seleciono todos os elementos e atribuo o valor.
Vou deixar o código aqui pra facilitar: Não funcionou:
body {
box-sizing: border-box;
height: 100vh;
}
img {
width: 100%;
height: 100%;
border: 20px solid;
}
div {
width: 600px;
height: 400px;
}
Código que funcionou:
body {
height: 100vh;
}
img {
box-sizing: border-box;
width: 100%;
height: 100%;
border: 20px solid;
}
div {
width: 600px;
height: 400px;
}
Queria saber se estou fazendo algo de errado, realmente não entendi a aplicação dessa propriedade dentro da tag body.