tamanho da caixa CSS3
CSS3 box-sizing propriedade para definir a largura e altura atributos contém enchimento (estofamento) ea fronteira (fronteira).
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após o número -webkit- navegador ou prefixo -moz- especificado.
| propriedade | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8 | 29,0 2.0 -moz- | 5.1 3.1 -webkit- | 9.5 |
Não use a propriedade CSS3 box-sizing
Por padrão, a largura e o elemento de computação forma high-end é a seguinte:
width (largura) + enchimento (estofamento) + fronteira (fronteira) = elementos largura real
altura (altura) + enchimento (estofamento) + fronteira (fronteira) = altura real do elemento
Isto significa que quando vamos definir o elemento largura / altura, altura de exibição do elemento e largura seria maior (por causa do elemento de fronteira com o preenchimento calculará largura / altura in).
Estes <div> elemento dois, embora a largura e altura configurações o mesmo, mas o tamanho do verdadeiro show inconsistente porque div2 preenchimento especificado:
Exemplos
width: 300px;
height: 100px;
border: 1px solid azul;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid vermelho;
}
tente »
Se você quiser usar este método para obter a caixa menor e contém dentro das margens, você tem que ter em conta a fronteira e dentro da largura de margem.
O CSS3 box-sizing propriedade uma boa solução para este problema.
Use CSS3 propriedade de dimensionamento de caixa de
CSS3 box-sizing atributo contém enchimento (estofamento) ea fronteira (fronteira) em largura e altura de um elemento.
Se você definir no elemento box-sizing: border-box; o preenchimento (preenchimento) e da fronteira (fronteira) também está incluída na largura e altura:
Aqui estão dois <div> elemento é adicionado box-sizing: border-box; propriedades de um exemplo simples.
Exemplos
width: 300px;
height: 100px;
border: 1px solid azul;
box-sizing: Beira-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid vermelho;
box-sizing: Beira-box;
}
tente »
A julgar pelos resultados de box-sizing: border-box; melhores resultados, é também um monte de desenvolvedores precisa.
O código a seguir pode fazer todos os elementos em uma forma mais intuitiva para exibir tamanho. Muitos navegadores já suportam box-sizing: border-box; (mas não todos - que é por isso que os elementos de entrada e definir o texto width: 100%; a largura do post não é o mesmo).
é mais recomendado todos os elementos usando a caixa-sizing: