CSS, caixa e layout

Seletores: ler antes de contar

• Espaço é descendente; > é filho direto; + é o irmão seguinte; ~ são os posteriores. A vírgula separa alternativas.
• p.ativo é o próprio parágrafo; p .ativo é um descendente.
• :nth-child conta todos os elementos filhos; :nth-of-type só os do tipo. A contagem começa em 1 e ignora texto.
• [href^="https"], [href$=".pdf"], [href*="livro"]: início, fim, parte. [class~="x"] procura palavra em lista; [lang|="pt"] aceita pt ou pt-....
• :not exclui, :is reúne, :has testa relação com outros elementos. & é o seletor exterior em regras aninhadas.
• Pseudo-classe (:checked) testa o elemento; pseudo-elemento (::before, com content) representa parte gerada.

Cascata em quatro passos

1. Confirma que ambas atingem o elemento.
2. Compara origem, importância e camadas. Regras sem camada vencem as com camada; nas importantes, a ordem inverte-se. Camada posterior vence anterior.
3. No mesmo nível, compara (IDs, classes/atributos/pseudo-classes, elementos) da esquerda para a direita.
4. Em empate, ganha a posterior.

(1,1,3) vence (1,1,0) na terceira coluna. Um ID vence qualquer número de classes. * e combinadores não contam; :where vale zero; :is, :not e :has usam o maior argumento. !important muda importância, não especificidade. Estilo em linha vence regras normais do autor.

Herança é outro mecanismo: declaração direta no filho vence valor herdado. color herda; margem, borda e padding não. inherit pede ao pai; initial pede o inicial; unset herda quando a propriedade é herdada.

Caixa: onde fica cada medida

• content-box: width mede só o conteúdo; soma padding e borda. border-box: já os inclui. Margem fica sempre fora.
• padding: a b c d segue cima, direita, baixo, esquerda; dois valores dão vertical e horizontal.
• Margens verticais de blocos em fluxo podem colapsar (16px com 24px dão 24px). Padding nunca colapsa.
• rem usa a raiz; em em font-size usa o pai, nas restantes usa o próprio elemento. vw/vh usam o viewport.

Posicionar e distribuir

Valor	Conserva lugar?	Referência
static	Sim, fluxo normal	Nenhuma (top/left ignorados)
relative	Sim, desloca o desenho	Posição original
absolute	Não	Antepassado posicionado (ou transformado) mais próximo
fixed	Não	Normalmente o viewport
sticky	Sim, até prender	Limite definido no scroll

• display: none retira a caixa; visibility: hidden guarda o espaço. transform redesenha sem reservar lugar. z-index só compara dentro do mesmo contexto de empilhamento.
• Flexbox: justify-content no eixo principal, align-items no transversal. flex: 1 1 200px é crescimento, redução e base, não largura fixa. margin-top: auto empurra o botão para o fundo do cartão.
• Grid: 1fr reparte o que sobra depois de fixos e gaps. grid-column: 1 / 3 ocupa duas colunas. minmax(0, 1fr) deixa a coluna encolher abaixo do mínimo do conteúdo.

Conta de fr (720px, fixa 120px, gaps 30px)

Sobra 720 - 120 - 60 = 540; com 1fr + 2fr dá 180px e 360px. Um item 2 / 4 atravessa colunas e gap interior: 180 + 30 + 360 = 570px. fr não é percentagem do contentor.

Explicação completa.