36 lines
3.0 KiB
Plaintext
36 lines
3.0 KiB
Plaintext
---
|
|
title: Explique sua compreensão do modelo de caixa e como você diria ao navegador em CSS para renderizar seu layout em diferentes modelos de caixa.
|
|
---
|
|
|
|
O modelo de caixa CSS descreve as caixas retangulares que são geradas para os elementos na árvore de documentos e dispostas de acordo com o modelo de formatação visual. Cada caixa tem uma área de conteúdo (por exemplo, texto, uma imagem, etc.) e áreas opcionais dos `padding`, `border`, e `margin`.
|
|
|
|
O modelo da caixa CSS é responsável por calcular:
|
|
|
|
- O espaço que um elemento de bloco ocupa.
|
|
- Se as bordas e/ou margens se sobrepõem ou se colapsam.
|
|
- Dimensões de uma caixa.
|
|
|
|
## Regras do Modelo da Caixa
|
|
|
|
- As dimensões de um elemento de bloco são calculadas por meio de `width`, `height`, `padding`s e `border`s.
|
|
- Se nenhum `height` for especificado, um elemento do bloco será tão alto quanto o conteúdo que ele contém, mais `padding` (a menos que existam floats, para quem, veja [descreva flutuantes e como funcionam](/questions/quiz/describe-floats-and-how-they-work)).
|
|
- Se nenhum `width` for especificado, um elemento não-`float` do bloco será expandido para caber a largura do seu pai menos o `padding`, a não ser que tenha uma propriedade definida para 'max-width', neste caso não será maior do que a largura máxima especificada.
|
|
- Alguns elementos de nível de bloco (por exemplo, `table`, `figure` e `input`) têm valores de largura inerentes ou padrão, e podem não expandir para preencher a largura total do seu recipiente pai.
|
|
- Nota: `span` é um elemento em nível inline e não tem largura padrão, então ele não se expandirá para se ajustar.
|
|
- O `height` de um elemento é calculado pela `height` do conteúdo.
|
|
- A `width` de um elemento é calculada pela `width` do conteúdo.
|
|
- Por padrão (`box-sizing: content-box`), `padding`s e `border`s não fazem parte da `width` e `height` de um elemento.
|
|
|
|
Note que `margin`s não são contados para o tamanho real da caixa. Isso afeta o espaço total que a caixa ocupará na página, mas apenas o espaço fora da caixa. A área da caixa para no `border` — ela não se estende até a `margin`.
|
|
|
|
## Extra
|
|
|
|
A propriedade box-sizing, que define como as dimensões totais largura e altura de um elemento são calculadas.
|
|
|
|
- `box-sizing: content-box`: Este é o valor padrão de `box-sizing` e segue as regras mencionadas acima.
|
|
- `box-sizing: border-box`: A `width` e a `height` incluirão o conteúdo, padding e borda, mas não incluirão a margin. Esta é uma maneira muito mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS (por exemplo, Bootstrap, Tailwind, Bulma) definem `* { box-sizing: border-box; }` globalmente, para que todos os elementos usem esse modelo de caixa por padrão. Veja a [pergunta sobre o 'box-sizing: border-box'](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) para mais informações.
|
|
|
|
## Referências
|
|
|
|
- [O modelo de caixa ct, MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
|