CSS3 Tamanho da caixa (box-sizing)

Usando CSS3A função de ajuste do tamanho da caixa, você pode especificar a largura eficaz do elemento.

Usando o tamanho da caixa (box-redefinindo a largura da caixa (sizing)

Por padrão, a caixa do elemento é visível/A largura ou altura real apresentada na página depende dissowidthouheight,paddingeborderO valor da propriedade. Por exemplo, se você tiver um elemento de largura100% de<div>O elemento aplicou alguns espaços internos e bordas, então a barra de rolagem horizontal aparecerá, conforme o exemplo abaixo.

.box　{
　　　　largura:　100%;
　　　　preenchimento:　20px;
　　　　borda:　5px sólido #f08080;
}

Este é um problema muito comum que os designers de sites enfrentam há muito tempo. No entanto, CSS3introduziu o box-Atributo sizing para resolver esse problema e tornar o layout CSS mais simples e intuitivo. A introdução do box-Atributo sizing altera o modelo de caixa padrão do CSS da seguinte forma, colocando qualquer padding ou borda especificada no elemento no layout e desenho dentro da área de conteúdo, para que o tamanho de renderização da largura e altura do elemento seja igual aos atributos CSS width e height especificados.

.box　{
　　　　largura:　100%;
　　　　preenchimento:　20px;
　　　　borda:　5px sólido #f08080;
　　　　box-sizing:  borda-box;
}

Se você ver a saída deste exemplo, descobrirá que a barra de rolagem desapareceu.

Usando Box-Sizing

Criando Layouts com CSS box-Atributo sizing para criar um layout de colunas múltiplas se torna muito simples. Agora, você não precisa se preocupar com o tamanho final da caixa do elemento, sem precisar adicioná-la borda ou borda.

O exemplo a seguir criará um layout de duas colunas, onde cada coluna tem a mesma largura e usaflutuanteAtributos alinhados lado a lado.

.box　{
　　　　largura:　50%;
　　　　preenchimento:　20px;
　　　　fundo:  #f2f2f2;
　　　　flutuante:  esquerda;
　　　　box-sizing:  borda-box;
}

Da mesma forma, você pode usar essa técnica simples para criar layouts mais complexos.

.box　{
　　　　largura:　30%;
　　　　preenchimento:　20px;
　　　　margem-esquerda:　5%;
　　　　fundo:  #f2f2f2;
　　　　flutuante:  esquerda;
　　　　box-sizing:  borda-box;
}
.box:first-child　{
　　　　margem-left: 0;
}