4.1 Propriedade box-sizing
A propriedade box-sizing no CSS é uma ferramenta poderosa para gerenciar o modelo de medição de tamanhos dos elementos. Ela determina como os tamanhos dos elementos são calculados, incluindo largura e altura, além de preenchimentos, bordas e margens externas. Abaixo vamos ver em detalhes como o box-sizing funciona e como seu uso pode afetar o layout da página web.
Principais modelos de box-sizing
Content-box (modelo de conteúdo)
O valor content-box é o valor padrão para todos os elementos. Nesse modelo, os tamanhos dos elementos (width e height) determinam apenas os tamanhos do conteúdo, excluindo preenchimentos e bordas. Isso significa que preenchimentos e bordas são adicionados à largura e altura totais do elemento.
Border-box (modelo de bordas)
O valor border-box altera o modelo de medição para que os tamanhos dos elementos (width e height) incluam preenchimentos e bordas. Isso significa que preenchimentos e bordas fazem parte da largura e altura totais do elemento, simplificando os cálculos e o gerenciamento dos tamanhos dos elementos.
Exemplo de uso de box-sizing:
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: largura e altura incluem apenas o conteúdo.</div>
<div class="box border-box">Border-box: largura e altura incluem preenchimentos e bordas.</div>
Explicação do código:
.box: estilo básico para todas as caixas, incluindo preenchimentos, bordas e tamanhos.content-box: elemento com box-sizing: content-box, onde a largura e altura incluem apenas o conteúdo.border-box: elemento com box-sizing: border-box, onde a largura e altura incluem preenchimentos e bordas
4.2 Impacto do box-sizing no layout
Modelo de conteúdo (Content-box)
Quando se usa box-sizing: content-box;, preenchimentos e bordas são adicionados à largura e altura totais do elemento. Isso pode levar à necessidade de consideração extra ao calcular tamanhos e posicionamento dos elementos.
Exemplo de uso
Neste caso, a largura total do elemento será 200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, e a altura total será 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: largura e altura incluem apenas o conteúdo.</div>
Modelo de bordas (Border-box)
Quando se usa box-sizing: border-box;, preenchimentos e bordas são incluídos nas larguras e alturas dos elementos especificados. Isso simplifica os cálculos e o gerenciamento dos tamanhos dos elementos, especialmente ao criar layouts responsivos.
Exemplo de uso:
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: largura e altura incluem preenchimentos e bordas.</div>
4.3 Criando um layout responsivo
Usar box-sizing: border-box; permite simplificar a criação de layouts responsivos, pois os tamanhos dos elementos incluem preenchimentos e bordas, evitando transbordamentos inesperados.
Exemplo de uso:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
<div class="item">Elemento 4</div>
<div class="item">Elemento 5</div>
<div class="item">Elemento 6</div>
</div>
Explicação do código:
* { box-sizing: border-box; }: aplicando o modelo de bordas a todos os elementos na página para facilitar o gerenciamento dos tamanhos.container: Flex-container com layout responsivo.item: Flex-itens com distribuição uniforme de largura incluindo padding e border na largura total
4.4 Tamanhos fixos com preenchimentos internos
Usar box-sizing: border-box; permite definir facilmente tamanhos fixos para elementos com preenchimentos internos, sem se preocupar com transbordamento.
Exemplo de uso:
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* Centralização do texto verticalmente */
}
<div class="fixed-size">
Tamanhos fixos
</div>
Explicação do código:
.fixed-size: elemento com tamanhos fixos de 300x150 pixels, incluindo padding e border, o que permite controlar precisamente seus tamanhos
GO TO FULL VERSION