Quando criamos o layout de uma página da web, muitas vezes nos deparamos com uma situação em que a largura ou a altura da página da web final excede nosso pré-cálculo. Na verdade, isso é causado pelo chamado modelo de caixa CSS.
| #test{margem:10px;preenchimento:10px;largura:100px;altura:100px;} |
Assim como no código acima, muitas vezes calcularemos a posição que ele ocupa como largura: 120px, altura: 120px, pois no entendimento normal, padding é a margem interna, que deve ser incluída na largura, e margin é a borda externa. distância, então largura = margem esquerda + margem direita + largura, mas a interpretação do navegador do modelo de caixa CSS não é a mesma, então, no final, descobriremos que a largura e a altura da página da web disposta excederão nosso cálculos esperados e, finalmente, causar o desalinhamento da tela.
Na verdade, não é o caso. O cálculo real da posição ocupada pelo teste deveria ser width=margin-left + margin-right + padding-left + padding-right + width, ou seja, o tamanho real da largura deveria. seja margem interna + margem externa +A largura em si, ou seja, o tamanho real do teste deve ser 140px. O cálculo da altura é igual ao cálculo da largura.
E se uma borda for adicionada ao teste, o algoritmo de largura e altura também deverá adicionar o tamanho da borda.
| #test{margem:10px;preenchimento:10px;borda:5px;largura:100px;altura:100px;} |
A largura do teste aqui deve ser a borda externa + borda interna + borda + largura propriamente dita, então a largura do teste é 150px.
Conforme mostrado na figura abaixo, a posição real ocupada pela largura e altura não é a pequena área em si, mas deve ir até a camada azul escura mais externa.
