CSS3 Box Dimensionamento
O CSS3 box-sizing propriedade nos permite incluir o preenchimento e borda na largura total da um elemento e altura.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
Sem o CSS3 box-sizing Propriedade
Por padrão, a largura ea altura de um elemento é calculado da seguinte forma:
largura + estofamento + border = largura real de um elemento
altura + estofamento + border = altura real de um elemento
Isto significa: Quando você definir a largura / altura de um elemento, o elemento muitas vezes aparecem maior do que você definiu (por causa de fronteiras e preenchimento do elemento são adicionados ao elemento especificado largura / altura).
A ilustração a seguir mostra dois <div> elementos com a mesma largura e altura especificadas:
Os dois <div> elementos acima acabam com diferentes tamanhos no resultado (porque div2 tem um preenchimento especificado):
Exemplo
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Tente você mesmo " Então, por um longo tempo os desenvolvedores web tenha especificado um valor de largura menor do que eles queriam, porque tiveram que subtrair o preenchimento e fronteiras.
Com CSS3, o box-sizing propriedade resolve este problema.
Com o CSS3 box-sizing Propriedade
O CSS3 box-sizing propriedade nos permite incluir o preenchimento e borda na largura total da um elemento e altura.
Se você definir box-sizing: border-box; em um estofamento elemento e fronteira são incluídos na largura e altura:
Aqui está o mesmo exemplo acima, com box-sizing: border-box; adicionado a ambos os <div> elementos:
Exemplo
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} Tente você mesmo " Uma vez que o resultado do uso da box-sizing: border-box; é muito melhor, muitos desenvolvedores querem todos os elementos em suas páginas para trabalhar desta forma.
O código abaixo assegura que todos os elementos são dimensionados deste modo mais intuitivo. Muitos navegadores já usam box-sizing: border-box; para muitos elementos de formulário (mas não todos - que é por isso que as entradas e áreas de texto olhar diferente em width: 100%;).
Aplicando isto a todos os elementos é seguro e sábio: