CSSOM e o modelo de caixa
CSS não é só aparência — define o espaço que cada elemento ocupa. O modelo de caixa (box model) é a base de todo layout na web.
Todo elemento é uma caixa
No browser, todo elemento HTML é uma caixa retangular, mesmo elementos "arredondados" — o border-radius apenas esconde os cantos, mas o espaço ocupado continua retangular. Essa caixa tem quatro zonas concêntricas: content (o conteúdo), padding (espaço interno), border (borda) e margin (espaço externo).
O CSSOM (CSS Object Model) é a contraparte do DOM para estilos. O browser parseia todos os arquivos
CSS e atributos style, calcula a cascata (qual regra vence) e armazena o estilo
computado de cada elemento. DOM + CSSOM = Render Tree.
<link> para um CSS externo grande pode atrasar significativamente o
primeiro pixel na tela.
Box Model ao vivo
Arraste os sliders para ajustar content, padding, border e margin. Veja como as dimensões totais mudam e o CSS gerado.
Cascata e especificidade
/* Cascata CSS: a ordem de prioridade dos estilos */ /* 1. User-agent stylesheet (padrão do browser) */ h1 { font-size: 2em; font-weight: bold; } /* peso: 0-0-1 */ /* 2. Seletores — especificidade: (ID, Classe, Tag) */ p { color: black; } /* (0, 0, 1) */ .intro { color: blue; } /* (0, 1, 0) */ #titulo { color: green; } /* (1, 0, 0) */ #titulo.intro { color: red; } /* (1, 1, 0) */ /* 3. !important — ignora especificidade (evite) */ p { color: purple !important; } /* 4. Inline style — especificidade (1, 0, 0, 0) — supera tudo exceto !important */ /* <p style="color: orange"> */
box-sizing: a escolha que muda o layout inteiro
/* box-sizing: a propriedade que muda tudo */ /* Padrão: content-box — width se refere ao CONTEÚDO */ .elemento { box-sizing: content-box; /* padrão */ width: 200px; padding: 20px; border: 4px; /* largura total = 200 + 20*2 + 4*2 = 248px */ } /* Moderno: border-box — width inclui padding e border */ .elemento { box-sizing: border-box; /* mais intuitivo */ width: 200px; padding: 20px; border: 4px; /* largura total = 200px (padding e border "cabem" dentro) */ } /* Convenção moderna — aplicar em tudo */ *, *::before, *::after { box-sizing: border-box; }
em é relativo ao font-size do elemento pai.
rem é relativo ao font-size do root (html) — mais previsível.
vw/vh são relativas ao viewport. Use rem para fontes e
px para borders. Evite em para espaçamento em componentes aninhados
pois o valor escala de forma imprevisível.
Construa um layout com Flexbox
Mini projeto: usando apenas CSS e HTML (sem framework), construa um layout de 3 colunas com header e footer que seja responsivo: em telas menores que 600px as colunas empilham verticalmente. Use Flexbox e media queries.
Projeto principal: crie um componente de card reutilizável com box model bem definido: padding interno de 1.5rem, border de 1px, border-radius de 8px, margin entre cards. Teste que o layout não quebra quando o conteúdo varia de 1 a 10 linhas de texto.
Desafio extra: implemente um calculador de especificidade em JavaScript: dado um seletor CSS como string ("#nav .link:hover"), retorne a especificidade no formato (a, b, c) e qual de dois seletores vence.
Teste sua intuição
box-sizing: border-box, ao definir width: 200px, o que está incluído nesse valor?
#titulo { color: red } e .destaque { color: blue } no mesmo elemento, qual vence?
Onde você encontra isso
Design Systems
Sistemas de design (Material UI, Tailwind) padronizam o box model: todos os componentes usam border-box, espaçamento em múltiplos de 4px ou 8px, e tokens para cores e bordas.
Layout Responsivo
Flexbox e Grid, combinados com min-width/max-width e clamp(), permitem layouts que se adaptam de 320px a 4K sem media queries manuais.
DevTools Box Model
O painel "Computed" no DevTools mostra o box model exato de qualquer elemento selecionado, com as dimensões reais em pixels — essencial para depurar problemas de layout.
CSS-in-JS
Styled-components, Emotion e CSS Modules encapsulam estilos por componente, eliminando conflitos de cascata globais. O browser ainda recebe CSS puro — a mágica é no build time.