Modelo de caixa CSS - CSS box model
Módulo de modelo de caixa CSS nível 3 | |
Nome nativo | Módulo de modelo de caixa CSS nível 3 |
---|---|
Status | Instantâneo da recomendação do candidato W3C |
Última versão | Nível 3 , 22 de dezembro de 2020 |
Organização | World Wide Web Consortium |
Comitê | Grupo de Trabalho CSS |
Editores | |
Padrões básicos | CSS |
Domínio | CSS |
Local na rede Internet | www |
Cascading Style Sheets |
---|
Conceitos |
Filosofias |
Ferramentas |
Comparações |
No desenvolvimento da web , o modelo de caixa CSS se refere a como os elementos HTML são modelados nos mecanismos do navegador e como as dimensões desses elementos HTML são derivadas das propriedades CSS . É um conceito fundamental para a composição de páginas HTML . As diretrizes do modelo de caixa são descritas pelos padrões da web World Wide Web Consortium (W3C), especificamente o CSS Working Group. Durante grande parte do final dos anos 1990 e início dos anos 2000, houve implementações não compatíveis com o padrão do modelo de caixa nos navegadores convencionais. Com o advento do CSS2 em 1998, que introduziu a box-sizing
propriedade, o problema já estava praticamente resolvido.
Especificidades
A especificação Cascading Style Sheets (CSS) descreve como os elementos das páginas da web são exibidos por navegadores gráficos. A seção 4 da especificação CSS1 define um "modelo de formatação" que fornece elementos de nível de bloco - como p
e blockquote
- largura e altura e três níveis de caixas ao redor: preenchimento, bordas e margens. Embora a especificação nunca use o termo "modelo de caixa" explicitamente, o termo se tornou amplamente usado por desenvolvedores da web e fornecedores de navegadores da web.
Todos os elementos HTML podem ser considerados "caixas", o que inclui div
tag, p
tag ou a
tag. Cada uma dessas caixas tem cinco dimensões modificáveis:
- o
height
ewidth
descreve as dimensões do conteúdo real da caixa (texto, imagens, ...) - o
padding
descreve o espaço entre este conteúdo e a borda da caixa - o
border
é qualquer tipo de linha (sólida, pontilhada, tracejada ...) ao redor da caixa, se presente - o
margin
é o espaço ao redor da borda
- o
De acordo com a especificação CSS1, lançada pelo W3C em 1996 e revisada em 1999, quando uma largura ou altura é explicitamente especificada para qualquer elemento de nível de bloco, ela deve determinar apenas a largura ou altura do elemento visível, com o preenchimento, bordas, e as margens aplicadas posteriormente. Antes do CSS3, esse modelo de caixa era conhecido como modelo de caixa W3C , em CSS3, era conhecido como content-box
.
A largura total de uma caixa é, portanto, left-margin
+ left-border
+ left-padding
+ width
+ right-padding
+ right-border
+ right-margin
. Da mesma forma, a altura total de uma caixa é igual a top-margin
+ top-border
+ top-padding
+ height
+ bottom-padding
+ bottom-border
+ bottom-margin
.
Por exemplo, o seguinte código CSS
.myClass {
width: 200px;
height: 100px;
padding: 10px;
border: solid 10px black;
margin: 10px;
}
especificaria as dimensões da caixa de cada bloco pertencente a 'myClass'. Além disso, cada uma dessas caixas terá altura total de 160 px e largura de 260 px .
CSS3 introduziu o modelo de caixa do Internet Explorer ao padrão, conhecido como border-box
.
História
Antes do HTML 4 e do CSS, poucos elementos HTML suportavam borda e preenchimento, portanto, a definição da largura e da altura de um elemento não era muito controversa. No entanto, isso variou dependendo do elemento. O atributo de largura do HTML de uma tabela define a largura da tabela, incluindo sua borda. Por outro lado, o atributo de largura do HTML de uma imagem definia a largura da própria imagem (dentro de qualquer borda). O único elemento de suporte ao preenchimento naqueles primeiros dias era a célula da mesa. A largura da célula foi definida como "a largura sugerida para o conteúdo de uma célula em pixels, excluindo o preenchimento da célula".
Em 1996, o CSS introduziu margem, borda e preenchimento para muitos outros elementos. Adotou-se uma largura de definição em relação ao conteúdo, borda, margem e preenchimento semelhante à de uma célula de tabela. Desde então, ele se tornou conhecido como o modelo de caixa W3C .
Na época, poucos fornecedores de navegadores implementaram o modelo de caixa W3C ao pé da letra. Os dois principais navegadores da época, o Netscape 4.0 e o Internet Explorer 4.0, definiam a largura e a altura como a distância de uma borda a outra. Isso é conhecido como o modelo tradicional ou o modelo de caixa do Internet Explorer .
O Internet Explorer no " modo peculiares " inclui o conteúdo, preenchimento e bordas dentro de uma largura ou altura especificada; isso resulta em uma renderização mais estreita ou mais curta de uma caixa do que resultaria seguindo o comportamento padrão.
O comportamento do modelo de caixa do Internet Explorer costumava ser considerado um bug, devido à maneira como as versões anteriores do Internet Explorer lidam com o modelo de caixa ou dimensionamento de elementos em uma página da web, o que difere da forma padrão recomendada pelo W3C para o Estilo em cascata Idioma do Sheets . A partir do Internet Explorer 6 , o navegador oferece suporte a um modo de renderização alternativo (denominado "modo compatível com os padrões") que resolve essa discrepância. No entanto, por motivos de compatibilidade com versões anteriores, todas as versões ainda se comportam da maneira usual e não padrão por padrão (consulte o modo quirks ). O Internet Explorer para Mac não é afetado por esse comportamento não padrão.
Soluções Alternativas
As versões 6 e posteriores do Internet Explorer não são afetadas pelo bug se a página contiver certas declarações de tipo de documento HTML . Essas versões mantêm o comportamento com erros quando no modo quirks por razões de compatibilidade com versões anteriores. Por exemplo, o modo quirks é acionado:
- Quando a declaração do tipo de documento está ausente ou incompleta;
- Quando um HTML 3 ou documento anterior é encontrado;
- Quando uma declaração de tipo de documento HTML 4.0 Transitional ou Frameset é usada e um identificador de sistema (URI) não está presente;
- Quando um comentário SGML ou outro conteúdo não reconhecido aparece antes da declaração do tipo de documento
- O Internet Explorer 6 também usa o modo quirks se houver uma declaração XML antes da declaração do tipo de documento.
Várias soluções alternativas foram criadas para forçar as versões 5 e anteriores do Internet Explorer a exibir páginas da Web usando o modelo de caixa W3C. Essas soluções alternativas geralmente exploram bugs não relacionados no processamento do seletor CSS do Internet Explorer para ocultar certas regras do navegador. A mais conhecida dessas soluções alternativas é o "box model hack" desenvolvido por Tantek Çelik , um ex-funcionário da Microsoft que desenvolveu essa ideia enquanto trabalhava no Internet Explorer para Macintosh. Envolve especificar uma declaração de largura para o Internet Explorer para Windows e, em seguida, substituí-la por outra declaração de largura para navegadores compatíveis com CSS. Esta segunda declaração está oculta do Internet Explorer para Windows, explorando outros bugs na forma como analisa as regras CSS. A implementação desses "hacks" CSS foi ainda mais complicada com o lançamento público do Internet Explorer 7, que teve alguns problemas corrigidos, mas não outros, causando resultados indesejados em páginas que usam esses hacks.
Os hacks de modelo de caixa não se mostraram confiáveis porque contam com bugs no suporte a CSS dos navegadores que podem ser corrigidos em versões posteriores. Por esse motivo, alguns desenvolvedores da Web recomendaram evitar a especificação de largura e preenchimento para o mesmo elemento ou usar comentários condicionais e / ou filtros CSS para contornar o bug do modelo de caixa em versões anteriores do Internet Explorer.
Suporte para o modelo de caixa do Internet Explorer
O web designer Doug Bowman disse que o modelo de caixa original do Internet Explorer representa uma abordagem melhor e mais lógica. Peter-Paul Koch dá o exemplo de uma caixa física, cujas dimensões sempre se referem à própria caixa, incluindo o preenchimento potencial, mas nunca seu conteúdo. Ele diz que esse modelo de caixa é mais útil para designers gráficos, que criam designs com base na largura visível das caixas do que na largura de seu conteúdo. Bernie Zimmermann diz que o modelo de caixa do Internet Explorer está mais próximo da definição das dimensões e do preenchimento da célula usados no modelo de tabela HTML.
O W3C incluiu uma propriedade de "tamanho de caixa" no CSS3. Quando box-sizing: border-box;
é especificado para um elemento, qualquer preenchimento ou borda do elemento é desenhado dentro da largura e altura especificadas, "conforme comumente implementado por agentes de usuário HTML legado". Internet Explorer 8 , navegadores WebKit como Apple Safari 5.1+ e Google Chrome , navegadores baseados no Gecko como Mozilla Firefox 29.0 e posterior, Opera 7.0 e posterior e Konqueror 3.3.2 e posterior suportam a propriedade CSS3 box-sizing. Os navegadores Gecko anteriores a 29.0 suportam a mesma funcionalidade usando a -moz-box-sizing
propriedade específica do navegador . border-box
é o modelo de caixa padrão usado na estrutura do Bootstrap .
Referências
links externos
- A especificação do World Wide Web Consortium (W3C) do modelo de caixa
- Um tutorial sobre o modelo de caixa CSS
- Descrição de Tantek Çelik do "hack de modelo de caixa"
- Fazendo o Internet Explorer funcionar bem com CSS - artigo em about.com que descreve várias maneiras de contornar o problema do modelo de caixa e outros bugs do IE.
- Cascading Style Sheet Compatibility no Internet Explorer 7 - artigo MSDN, julho de 2006.
- Diferenças do CSS Box Model no Firefox e Internet Explorer - mais explicações sobre as diferenças de renderização entre o Mozilla Firefox e o Internet Explorer.