O melhor tutorial tamanho da caixa CSS3 em 2024. Neste tutorial você pode aprender Suporte a navegadores,Não use a propriedade CSS3 box-sizing,Use CSS3 propriedade de dimensionamento de caixa de,
CSS3 box-sizing
propriedade para definir a largura e altura atributos contém enchimento (estofamento) ea fronteira (fronteira).
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 |
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:
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.
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.
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: