Podcast do CSS - 001: O modelo de caixa
Digamos que você tenha esta parte de HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Em seguida, você cria este CSS para ele:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
O conteúdo termina com 142 px de largura, em vez dos 100 px que você especificou, e sai do seu elemento. Por quê?
O modelo de box é a base principal do CSS. Entender como o modelo de caixa funciona, como é afetado por outros aspectos do CSS e, o mais importante, como você pode controlá-lo, pode ajudar a escrever CSS mais previsíveis.
É importante lembrar que tudo que é exibido pelo CSS é uma caixa, mesmo se
for apenas um texto ou tiver uma border-radius que faz com que pareça um círculo.
Conteúdo e tamanho
As caixas têm um comportamento diferente com base no valor de display, no conjunto.
e o conteúdo delas. Esse conteúdo pode ser texto simples ou
mais caixas geradas por elementos filhos. De qualquer forma, o conteúdo afeta o tamanho
da caixa por padrão.
Você pode controlar esse recurso usando o dimensionamento externo ou o intrínseco para permitir que o navegador tome decisões por você com base no tamanho do conteúdo.
Esta é uma demonstração básica que explica a diferença:
A demonstração tem as palavras "O CSS é incrível" em uma caixa com dimensões fixas e
borda grossa. Como a caixa tem uma largura especificada, ela foi dimensionada de forma externa.
Isso significa que ele controla o tamanho do conteúdo filho. No entanto, a palavra
"incrível" é muito grande para o box, por isso ultrapassa o limite do box pai
border box (falaremos sobre isso mais adiante). Uma forma de evitar esse estouro é permitir
a caixa ser intrinsecamente dimensionada por não definir a largura ou, nesse caso,
definindo width como min-content. A palavra-chave min-content instrui a caixa a
ter a mesma largura que a largura mínima intrínseca do conteúdo (a palavra
"incrível"). Isso permite que a caixa se encaixe perfeitamente ao redor do texto.
Aqui está um exemplo mais complexo que mostra o impacto de diferentes tamanhos em conteúdo:
Ative e desative o dimensionamento intrínseco para conferir os benefícios do dimensionamento externo com o dimensionamento extrínseco e intrínseco dão ao conteúdo mais controle Para conferir os efeitos, adicione algumas frases de texto ao card. Quando esse elemento tem tamanho externo, há um limite na quantidade de conteúdo que você que podem ser adicionados antes do estouro, mas isso não acontece quando o dimensionamento intrínseco é ativada.
Por padrão, esse elemento tem um conjunto width e height de 400px cada.
Essas dimensões fornecem limites rígidos para tudo dentro do elemento, que são
a menos que o conteúdo seja grande demais para a caixa. Você pode ver isso em ação
mudando a legenda abaixo da imagem da flor para algo que exceda o
altura da caixa.
Termo-chave: o estouro acontece quando o conteúdo é grande demais para a caixa em que está. Você pode
gerenciar a forma como um elemento processa conteúdo flutuante usando a propriedade overflow.
Mudar para o dimensionamento intrínseco permite que o navegador tome decisões por você com base no o tamanho do conteúdo da caixa. Isso diminui muito a probabilidade de estouro, porque a caixa é redimensionado com seu conteúdo.
É importante lembrar que o dimensionamento intrínseco é o padrão do navegador e, geralmente, fornece muito mais flexibilidade do que o dimensionamento extrínseco.
As áreas do modelo de box
As caixas são compostas por áreas distintas de modelos de caixa que fazem um trabalho específico.
A caixa de conteúdo é a área em que o conteúdo reside. O conteúdo pode controlam o tamanho do pai, de modo que essa geralmente é a área com o tamanho mais variado.
A caixa de preenchimento envolve a caixa de conteúdo e é o espaço criado pela
a propriedade padding.
Como o padding fica dentro da caixa, o plano de fundo dela fica visível no espaço
que ele cria.
Se a caixa tiver regras de estouro definidas, como overflow: auto ou
overflow: scroll, as barras de rolagem também ocupam esse espaço.
A caixa de borda envolve a caixa de preenchimento, e o espaço dela é definido pelo
border, que
cria um frame visual para o elemento. A borda do elemento é a
do que pode ser visualizado.
A área final, a caixa de margem, é o espaço ao redor da caixa, definida pelo
regra margin do box. Propriedades como
outline e
box-shadow
também ocupam esse espaço porque são pintados sobre o elemento e não
afetar o tamanho da caixa. Alterando a configuração outline-width de 200px da caixa em
uma caixa não muda nada dentro da borda.
Uma analogia útil
O modelo de box é complexo de entender, então aqui está uma analogia com o que aprendeu até agora.
Neste diagrama, há três porta-retratos montadas lado a lado em uma parede. Os elementos da imagem emoldurada correspondem ao modelo de caixa, da seguinte maneira:
- A caixa de conteúdo é a arte.
- A caixa de padding é a placa de suporte branca, entre a moldura e a arte.
- A caixa de borda é o frame, fornecendo uma borda literal para a arte.
- A caixa da margem é o espaço entre os frames.
- A sombra ocupa o mesmo espaço que a caixa de margem.
Depurar o modelo de caixa
O navegador DevTools fornece uma visualização do modelo de box de um box selecionado cálculos, que podem ajudar a entender como o modelo de caixa funciona e como ele afeta o site em que você está trabalhando.
Tente fazer o seguinte no seu navegador:
- Abra o DevTools.
- Selecione um elemento.
- Mostrar o depurador de modelos de caixa.
Controlar o modelo de box
Para entender como controlar o modelo de caixa, primeiro é preciso entender o que acontece no navegador.
Todo navegador aplica uma folha de estilo user agent aos documentos HTML que define qual deve ser a aparência e o comportamento dos elementos se o CSS não tiver sido definido. O CSS no as folhas de estilo do user agent variam de acordo com o navegador, mas elas oferecem padrão para facilitar a leitura do conteúdo.
Uma propriedade que a folha de estilos do user agent define o display padrão de uma caixa. Para
exemplo, em um fluxo normal, o valor display padrão de um elemento <div> é
block, um <li> tem um valor display padrão de list-item e um <span>
tem um valor display padrão de inline.
Um elemento inline tem uma margem de bloco, mas outros elementos não a respeitam.
Com inline-block, outros elementos respeitam a margem do bloco, mas o primeiro
mantém a maioria dos comportamentos que tinha como um elemento inline.
Um item block preenche o espaço inline disponível por padrão, enquanto
Os elementos inline e inline-block têm o mesmo tamanho que o próprio conteúdo.
A folha de estilo do user agent também define box-sizing, que informa à caixa como
calcular o tamanho da caixa. Por padrão, todos os elementos têm o user agent a seguir
estilo: box-sizing: content-box;. Isso significa que, quando você define dimensões como
como width e height, essas dimensões se aplicam à caixa de conteúdo. Se você
e definir padding e border, esses valores serão adicionados à propriedade
tamanho.
Teste seu conhecimento
Teste seu conhecimento sobre o impacto do tamanho do modelo de caixa nas propriedades.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
Qual vai ser a largura de .my-box?
200px estaria correto se o
caixa tinha box-sizing: border-box.
A largura real dessa caixa é de 260 px.
Como o CSS usa o box-sizing: content-box padrão, a largura aplicada é
a largura do conteúdo, e padding e border em ambos os lados são adicionados
isso. 200 px para o conteúdo + 40 px de preenchimento + 20 px de borda formam o total
largura visível de 260 px.
Você pode mudar isso especificando o dimensionamento border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Esse modelo de caixa alternativo instrui o CSS a aplicar a width à caixa de borda.
em vez da caixa de conteúdo. Isso significa que border e padding recebem
enviado, ou seja, quando você define .my-box como 200px de largura, ele é renderizado
com 200px de largura.
Confira como isso funciona na demonstração interativa a seguir. Quando você alternar o
box-sizing, a área azul mostra qual CSS está sendo aplicado dentro do
caixa
*,
*::before,
*::after {
box-sizing: border-box;
}
Esta regra CSS seleciona todos os elementos do documento
e cada pseudoelemento ::before e ::after e aplica box-sizing: border-box.
Isso significa que cada elemento agora usa esse modelo de caixa alternativo.
Como o modelo de box alternativo pode ser mais previsível, os desenvolvedores costumam adicionar a redefinições e normalizadores, como este.