Uma olhada no CSS3 Box-Sizing
Não muito tempo atrás, quando criamos um caixa em uma página da web, digamos com um div, nós especificamos 100 px para a largura e a altura, seguidas por preenchimento para 10px e bordas de cerca de 10px também.
div largura: 100px; altura: 100 px; preenchimento: 10px; borda: 10px #eaeaea sólido;
Os navegadores expandirão o tamanho da caixa para 140px, onde essa quantidade de 140px da largura total / altura é composta da adição da preenchimento e a fronteiras do seguinte modo; 100px [largura / altura] + (2 x 10px [preenchimento]) + (2 x 10px [borda]).
No entanto, às vezes esse resultado não é o que esperamos que seja. Às vezes, precisamos que a caixa seja sempre 100 px independentemente do preenchimento ou das bordas adicionadas.
Para superar esse problema recorrente ao criar o layout da página da web, podemos usar o CSS3 dimensionamento de caixa propriedade para controlar como o Modelo de caixa CSS deve funcionar nos navegadores.
Usando o dimensionamento de caixa
o dimensionamento de caixa propriedade tem duas opções de valor, primeiro content-box; que é o valor padrão, ao usar este valor, o modelo de caixa se comportará como descrevemos acima.
E o segundo é caixa de borda, onde o tamanho da caixa será calculado subtraindo o tamanho do conteúdo especificado com o preenchimento e as bordas adicionadas.
div largura: 100px; altura: 100 px; preenchimento: 10px; borda: 10px #eaeaea sólido; dimensionamento de caixa: caixa de borda; -moz-box-size: border-box; / * Firefox 1-3 * / -webkit-box-sizing: caixa de borda; / * Safari * /
Por exemplo, quando temos uma caixa como a que descrevemos acima (quadrado de 100 px com 10 pixels para o preenchimento e as bordas), o tamanho do conteúdo diminuirá para 60 px, e o tamanho total da caixa permanece 100 px, onde a equação da subtração pode ser descrita da seguinte maneira; 100px [largura / altura] - ((2 x 10px [preenchimento]) + (2 x 10px [borda])).
- Demonstração
- Fonte de download
Suporte de Navegador
o dimensionamento de caixa propriedade é suportado em todos os navegadores; Firefox 3.6+, Safari 3, Opera 8.5+ e Internet Explorer 8 e superior.
Então, se você sabe que a maioria de seus visitantes não estará usando as versões do Internet Explorer abaixo de 8, você pode usar essa recomendação útil (graças a Paul Irish).
* box-sizing: border-box; -moz-box-size: border-box; / * Firefox 1-3 * / -webkit-box-sizing: caixa de borda; / * Safari * /
O snippet acima aplicará o dimensionamento de caixa propriedade para todos os elementos na sua página web.
Exemplo
Nesta seção, mostraremos um exemplo da vida real sobre como podemos fazer uso desse dimensionamento de caixa propriedade. Vamos criar uma navegação simples, baseada na marcação HTML abaixo, com cinco menus de links..
Então, vamos adicionar alguns estilos decorativos; como, definir a navegação fixar largura para 500 px e a largura do link para 100px cada, em seguida, inline o item da lista e forneça fundos diferentes para cada menu de link, para que você possa ver a diferença entre eles.
nav width: 500px; margem: 50px auto 0; altura: 50 px; nav ul preenchimento: 0; margem: 0; nav li float: left; nav a display: inline-block; largura: 100px; altura: 100%; background-color: #ccc; cor: # 555; text-decoration: nenhum; fonte-família: Arial, sans-serif; tamanho da fonte: 12pt; altura da linha: 300%; texto-alinhar: centro; nav a display: inline-block; largura: 100px; altura: 100%; cor: # 555; text-decoration: nenhum; fonte-família: Arial, sans-serif; nav li: nth-child (1) a cor de fundo: # E9E9E9; borda esquerda: 0; nav li: nth-child (2) a cor de fundo: # E4E4E4; nav li: nth-child (3) a cor de fundo: #DFDFDF; nav li: nth-child (4) a cor de fundo: # D9D9D9; nav li: nth-child (5) a cor de fundo: # D4D4D4; borda direita: 0;
Neste ponto, nossa navegação parece normal.
No entanto, o problema virá quando adicionarmos as bordas esquerda ou direita ao menu de links.
nav a border-left: 1px sólido #aaa; borda direita: 1px sólido # f3f3f3;
O menu irá transbordar para o fundo, já que a largura do link não é mais 100 px. É agora 102px, fazendo com que a largura total da navegação seja 10px por mais tempo que tenhamos especificado acima (500 px).
Para superar esse problema, precisamos aplicar o dimensionamento de caixa propriedade, da seguinte forma:
nav a border-left: 1px sólido #aaa; borda direita: 1px sólido # f3f3f3; dimensionamento de caixa: caixa de borda; -moz-box-size: border-box; -webkit-box-sizing: caixa de borda;
- Demonstração
- Fonte de download
Leitura Adicional
E, finalmente, se você é do tipo aventureiro e quer se aprofundar nesse assunto, reunimos algumas referências selecionadas para você:
- Entendendo o Modelo de Caixa de CSS - Tech Republic
- Bug de tamanho de caixa no Firefox - BugZilla
- Box-Dimensionamento FTW - Paul Irish
