Tutorial CSS 3: Compreendendo a propriedade box-sizing
Autor：Eve Cole
Data da Última Atualização：2009-06-12 17:54:27
Falando em bugs do IE, um exemplo notório é sua interpretação incorreta do "modelo de caixa": no IE5.x e no IE6/7 no modo Quirks, tanto a borda quanto o preenchimento são incluídos na largura. Isso adiciona muitos problemas ao trabalho dos engenheiros front-end. Cada caixa que precisa definir um tamanho deve ser considerada: ela está desencadeando um “bug de modelo de caixa”?
Ao mesmo tempo, devido à conformidade de outro grupo de navegadores com os padrões, quando definimos com precisão uma caixa exibida em um espaço limitado, também precisamos calcular: o espaço restante para ela é apenas um determinado tamanho, excluindo a borda e o preenchimento. , devemos Qual é a sua largura escrita?
Essa situação melhorou na era CSS3, graças a essa propriedade chamada box-sizing, que possui dois valores "content-box" e "border-box".
Ao definir box-sizing: content-box;, a interpretação do modelo de caixa pelo navegador segue o padrão W3C que reconhecemos anteriormente;
Quando box-sizing: border-box é definido, a interpretação do modelo de caixa pelo navegador é a mesma do IE6;
Por que esse atributo é considerado “atrasado”? Embora a interpretação do modelo de caixa do IE não esteja em conformidade com as especificações do W3C, ela também tem suas vantagens: não importa como você altere os valores de borda e preenchimento, isso não fará com que o tamanho total da caixa mude, e irá não atrapalhar o layout geral da página. Em navegadores modernos como o Firefox, se quisermos alterar o valor do preenchimento, teremos que recalcular a largura da caixa. Agora que o IE6 está morto, esta propriedade CSS está um pouco atrasada.
Para experimentar esta nova propriedade, use -moz-box-sizing para Firefox, use -webkit-box-sizing para Safari/WebKit e use apenas box-sizing para Opera.
