Não entendi muito bem como funciona e quando se usa o box-sizing: border-box;
Solucionado
Não entendi muito bem como funciona e quando se usa o box-sizing: border-box;
Vou te dar um exemplo prático:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resolução</title>
<link rel="stylesheet" href="reset.css">
<style>
.div1, .div2 {
border: 1px solid black;
display: inline-block;
width: 50%;
height: 100px;
text-align: center;
line-height: 100px;
padding: 20px;
}
.div1 {
background-color: #FF0033;
}
.div2{
background-color: royalblue;
}
</style>
</head>
<body>
<div class="div1">
Qualquer texto
</div><div class="div2">
Qualquer texto
</div>
</body>
</html>Eu criei esse código, e eu quero que ele tenha dois quadrados, onde cada um vai ter 50% de largura da página, e um vai ficar do lado do outro, ou seja, os dois quadrados ocupando 100% da minha página. Ai eu defini um padding pra ele, que é o espaçamento interno, e uma borda de 1 px, só pra separar. Também coloquei o display: inline-block, para ele colocar os elementos um ao lado do outro, e permitir que eu altere largura, altura, padding, etc. Além disso, criei um reset.css, para ele zerar qualquer comportamento padrão de margin, padding, ou tamanho de fonte que o navegador tenha.
Bom, vamos ver então como ficou.
Poxa,que estranho, eu coloquei 50% nos dois, zerei as margin, padding do navegador, mas está ficando um em baixo do outro, porque?
Acontece que ele está levando em conta para o tamanho da caixa, os valores de padding: 20px e border: 1px que eu defini lá no meu css.
Vamos ver através da ferramenta de desenvolvedor melhor o que ele está fazendo.
Meu body total tem 1366px de largura, e a metade seria 683, que realmente é a largura do meu conteudo da caixa. Mas perceba o sombreado azul dentro da div de cor vermelha, esse sombreado azul corresponde ao conteudo da caixa, que são os 683px. Ele não corresponde ao total da caixa, veja que há espaço sobrando ainda, e por conta disso, eles não ficaram ao lado um do outro.
Então, o que eu quero, é que minha caixa tenha 50% de largura, considerando tudo: padding, conteudo, border, etc. E finalmente, chegamos ao box-sizing: border-box. Vou incluir então no código essa propriedade e vamos ver o que ocorre.
Agora sim, eles ficaram um ao lado do outro. Veja ali no canto inferior direito, que o tamanho do conteudo mudou, não é mais 683px, agora é 641px, e isso ocorre por conta do border-box, pois agora ele está considerando tanto o padding, como o border como parte do tamanho total da caixa. Se você somar: 641 + 20 (padding-direito) + 20 (padding-esquerdo) + 1 (borda-direita) + 1 (borda-esquerda) = 683px, que é o tamanho da metade da página. Sei que ficou bem longa a explicação, mas espero que tenha entendido. Caso tenha alguma dúvida pode comentar aqui. Caso tenha sanado sua dúvida, marque como solução está resposta para o tópico não ficar aberto no fórum. Valeu.
A sim, agora entendi, muito obrigado pela explicação, muito boa.