O que é o modelo de caixa, do que é composto e quais…

O modelo de caixa (Modelo de Caixa CSS) é uma entidade abstrata que descreve como os elementos HTML são representados na página em forma de blocos retangulares. Ele define o tamanho e a disposição do conteúdo, das margens internas, das bordas e das margens externas do elemento.

O modelo de caixa consiste nas seguintes partes:

Conteúdo: O conteúdo do elemento (texto, imagens, etc.). Seu tamanho é determinado pelas propriedades width e height.
Padding (Preenchimento): O espaço entre o conteúdo do elemento e sua borda. É definido pelas propriedades padding-top, padding-right, padding-bottom, padding-left ou pela propriedade abreviada padding.
Borda (Border): A borda ao redor do preenchimento interno e do conteúdo. É definida pelas propriedades border-width, border-style, border-color ou pela propriedade abreviada border.
Margem (Margin): O espaço entre a borda do elemento e os elementos externos. É definida pelas propriedades margin-top, margin-right, margin-bottom, margin-left ou pela propriedade abreviada margin.

Existem dois principais tipos de modelo de caixa, determinados pela propriedade box-sizing:

content-box (valor padrão): A largura e a altura do elemento, definidas pelas propriedades width e height, referem-se apenas à área de conteúdo. Padding e Border são adicionados a esses tamanhos, aumentando o tamanho total do elemento.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Adiciona 20px ao tamanho total em cada eixo */
  border: 2px solid black; /* Adiciona 4px ao tamanho total em cada eixo */
  box-sizing: content-box; /* Comportamento padrão */
}
/* O tamanho total do elemento será 124px por 124px */

border-box: A largura e a altura do elemento, definidas pelas propriedades width e height, incluem o conteúdo, o padding e a border. Padding e Border não aumentam o tamanho total do elemento, mas "o comprimem" na área de conteúdo.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Incluído na largura/altura total */
  border: 2px solid black; /* Incluído na largura/altura total */
  box-sizing: border-box;
}
/* O tamanho total do elemento será 100px por 100px */

Usa-se mais frequentemente border-box para um comportamento de tamanhos mais previsível ao adicionar padding e border. Isso é útil, por exemplo, ao criar layouts responsivos, onde os elementos devem ocupar uma determinada largura percentual.

O que é o modelo de caixa, do que é composto e quais são os seus tipos?