Índice
O modelo de caixa em CSS descreve as caixas que são geradas a partir de elementos HTML. O modelo de caixa também contém opções detalhadas para definir margens, bordas, preenchimento e conteúdo para cada elemento. A imagem a seguir mostra como o modelo de caixa é construído.O box model ou "box model" é seguramente a característica mais importante da linguagem das folhas de estilo CSS, pois condiciona o design de todas as páginas web. O modelo de caixa é o comportamento do CSS que faz com que todos os elementos nas páginas sejam representados por caixas retangulares.
Caixas de uma página são criadas automaticamente. Cada vez que uma tag HTML é inserida, uma nova caixa retangular é criada que inclui o conteúdo desse elemento. A imagem a seguir mostra as três caixas retangulares que criam as três marcas HTML que a página inclui.
Existem dois tipos de caixas: bloquear e embutir. Os elementos do bloco interrompem o fluxo do layout. Ou seja, aparecem sozinhos, inserindo "quebras de linha". Os elementos embutidos seguem o fluxo e estão contidos nos elementos de bloco.
Por exemplo, um parágrafo seria um elemento de bloco (não podemos ter um parágrafo próximo ao outro, mas dois parágrafos em uma linha aparecerão um abaixo do outro. Por outro lado, um link é um elemento embutido, uma vez que não "cortar" o texto onde está.
As partes que compõem cada caixa e sua ordem de exibição do ponto de vista do usuário são as seguintes:
Conteúdo (conteúdo): é o conteúdo HTML do elemento (as palavras em um parágrafo, uma imagem, o texto em uma lista de elementos, etc.)
Preenchimento: Espaço livre opcional entre o conteúdo e a borda.
Fronteira: linha que envolve completamente o conteúdo e seu preenchimento.
Imagem de fundo: Imagem exibida atrás do conteúdo e espaço de preenchimento.
Cor de fundo: cor exibida atrás do conteúdo e espaço de preenchimento.
Margem (margem): separação opcional entre a caixa e as outras caixas adjacentes.
O preenchimento e a margem são transparentes, então o espaço ocupado pelo preenchimento mostra a cor de fundo ou imagem (se definida) e o espaço ocupado pela margem mostra a cor de fundo ou imagem de seu elemento pai (se definido). Se nenhum elemento pai tiver uma cor ou imagem de fundo definida, a cor ou imagem de fundo da página será exibida (se definida).
Se uma caixa define uma cor e uma imagem de fundo, a imagem tem prioridade mais alta e é a que é exibida. No entanto, se a imagem de fundo não cobrir completamente a caixa do item ou se a imagem tiver áreas transparentes, a cor de fundo também será exibida. Combinando imagens transparentes e cores de fundo, efeitos gráficos muito interessantes podem ser obtidos.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
