Vibulário
Menu
Aparência e idioma
Termos por tópico · 51 guias

Layout & CSS

Aprenda como o conteúdo obtém seu tamanho, posição, espaçamento, camadas e forma em cada tela.

01 / Atlas

Todos os termos de Layout & CSS

Abrir um termo para um significado simples, um exemplo, quando usá-lo, quão oficial ele é, e seu nome de código.

  2. 02 · Mais detalhes

    Aninhamento de CSS CSS Nesting

    O aninhamento de CSS é uma sintaxe incorporada para escrever uma regra de estilo dentro de outra. O navegador ainda segue as regras do CSS para ler seletores e seu peso.

  3. 03 · Centro

    App Shell App Shell

    Uma shell de aplicativo é o pequeno quadro que permanece enquanto o conteúdo da página muda. Normalmente, ela mantém a navegação, a identidade e o status.

  4. 04 · Mais detalhes

    Bloco contido Containing Block

    Um bloco de contenção é o retângulo que um elemento usa para calcular sua posição e tamanho em porcentagem.

  5. 05 · Centro

    Box Model Box Model

    O modelo de caixa do CSS explica o tamanho de um elemento. Cada caixa possui conteúdo, padding, uma borda e margem.

  7. 07 · Mais detalhes

    Camadas de Cascata Cascade Layers

    Camadas de cascata são grupos nomeados que definem a ordem das regras CSS. O navegador verifica essa ordem antes de comparar a especificidade do seletor.

  8. 08 · Centro

    Cascata em CSS CSS Cascade

    A cascata do CSS é o conjunto de regras que um navegador usa quando vários estilos se aplicam ao mesmo elemento. Ela verifica de onde cada regra veio, sua importância, contexto, camada, peso do seletor, escopo e ordem.

  9. 09 · Centro

    clamp() clamp()

    `clamp()` escolhe um valor CSS preferido, mas mantém entre um mínimo e um máximo.

  11. 11 · Mais detalhes

    comportamento de overscroll overscroll-behavior

    `overscroll-behavior` controla o que acontece quando uma área de rolagem chega à sua borda. Pode impedir que a rolagem continue em uma área superior e pode mudar o efeito da borda.

  12. 12 · Mais detalhes

    Container Query Container Query

    Uma container query permite que o CSS adapte um componente ao seu próprio contêiner. Ela verifica o tamanho ou estilo daquele contêiner em vez de apenas a viewport.

  13. 13 · Mais detalhes

    conteúdo mínimo min-content

    `min-content` é o menor tamanho que o conteúdo pode usar após quebrar em todos os pontos de quebra permitidos.

  14. 14 · Mais detalhes

    Contexto de empilhamento Stacking Context

    Um contexto de empilhamento é um grupo local de camadas CSS. Os itens são ordenados dentro do grupo primeiro, depois todo o grupo é colocado entre outros grupos.

  17. 17 · Centro

    CSS Grid CSS Grid

    CSS Grid é um sistema de layout para linhas e colunas juntas. Pode definir áreas fixas ou alterá-las conforme o espaço muda.

  18. 18 · Mais detalhes

    Desfoque de fundo Backdrop Blur

    O desfoque de fundo suaviza o que está atrás de uma camada transparente. Ele não desfoca o conteúdo da própria camada.

  20. 20 · Centro

    Espaçamento Spacing

    Espaçamento é o espaço vazio colocado de propósito. Ele agrupa itens relacionados, separa ideias e dá ritmo à página.

  21. 21 · Centro

    Espaço Gap

    Espaço é o espaço que um contêiner coloca entre seus filhos Flexbox ou Grid. A mesma regra se aplica a cada par.

  22. 22 · Centro

    Especificidade do CSS CSS Specificity

    A especificidade do CSS é o peso de um seletor. Quando outras regras de cascata empatam, o navegador usa esse peso para escolher qual estilo prevalece.

  23. 23 · Centro

    Flexbox Flexbox

    Flexbox é um sistema de layout CSS para uma direção de cada vez. Ele alinha e distribui itens em uma linha ou coluna.

  24. 24 · Mais detalhes

    Grade Bento Bento Grid

    Um grid bento agrupa blocos de tamanhos diferentes em um único layout. Espaços maiores mostram qual conteúdo é mais importante.

  25. 25 · Centro

    Grade de Cards Card Grid

    Um grid de cartões repete cartões que podem ser comparados. O número de colunas muda com o espaço disponível.

  26. 26 · Centro

    Herança em CSS CSS Inheritance

    A herança do CSS permite que algumas propriedades copiem um valor de um elemento pai. Isso acontece quando o filho não possui um valor próprio.

  28. 28 · Mais detalhes

    Layout de alvenaria Masonry Layout

    Um layout masonry encaixa itens de alturas diferentes em colunas. Os itens preenchem espaços verticais sem compartilhar linhas da mesma fileira.

  30. 30 · Centro

    Margem Margin

    Margem é o espaço fora da borda de um elemento. Ela mantém esse elemento afastado de itens de layout próximos.

  31. 31 · Mais detalhes

    max-content max-content

    `max-content` é o tamanho que o conteúdo gostaria de ter se não quebrasse nos pontos normais de quebra.

  32. 32 · Centro

    minmax() minmax()

    `minmax()` é uma função do CSS Grid que dá a uma linha ou coluna tanto um tamanho mínimo quanto um máximo.

  33. 33 · Centro

    Opacidade Opacity

    A opacidade indica quão sólido um elemento e seus filhos parecem. Pode variar de transparente a sólido.

  34. 34 · Centro

    Posição corrigida Fixed Position

    O posicionamento fixo em CSS coloca uma caixa em relação a um contêiner fixo, normalmente a janela do navegador. A caixa normalmente permanece no lugar enquanto o documento rola.

  35. 35 · Centro

    Posição fixa Sticky Position

    O posicionamento sticky do CSS começa como um posicionamento relative normal. À medida que a página rola, a caixa pode permanecer em uma borda definida, mas somente dentro de seu bloco contêiner.

  37. 37 · Centro

    Posicionamento CSS CSS Positioning

    Posicionamento CSS indica em relação a que um elemento é colocado. Pode usar fluxo normal, ele mesmo, um ancestral ou a viewport como referência.

  39. 39 · Centro

    Preenchimento Padding

    Preenchimento é o espaço dentro da borda de um elemento, entre seu conteúdo e sua borda.

  42. 42 · Centro

    Propriedades Lógicas do CSS CSS Logical Properties

    As propriedades lógicas do CSS descrevem os lados pelo fluxo de escrita, como bloco e linha. Elas substituem direções fixas como topo, direita, baixo e esquerda. Isso ajuda os layouts a seguirem a direção de escrita da língua.

  43. 43 · Centro

    Pseudo-classe Pseudo-class

    Uma pseudo-classe faz parte de um seletor CSS. Ela encontra um elemento por uma condição, como estado, lugar, idioma ou ação do usuário.

  44. 44 · Centro

    Pseudo-elemento Pseudo-element

    Um pseudo-elemento permite que o CSS estilize uma parte ou caixa sem um elemento normal no HTML de origem. Exemplos incluem a primeira letra e decoração gerada.

  45. 45 · Centro

    Seletor CSS CSS Selector

    Um seletor CSS é um padrão que encontra elementos em uma página para que estilos possam ser aplicados a eles.

  46. 46 · Mais detalhes

    Snap de rolagem Scroll Snap

    CSS Scroll Snap permite que uma área de rolagem pare em pontos de alinhamento escolhidos após as pessoas rolarem.

  47. 47 · Mais detalhes

    Subgrade Subgrid

    Um subgrade é uma grade dentro de outra grade que compartilha os tamanhos de linha ou coluna do pai. Pode compartilhar em uma direção ou em ambas.

  48. 48 · Centro

    Transbordamento Overflow

    O transbordamento é o que acontece quando o conteúdo é maior que sua caixa. CSS pode exibi-lo, cortá-lo ou permitir que as pessoas rolem.

  50. 50 · Centro

    Unidades de viewport Viewport Units

    Unidades de viewport são comprimentos CSS baseados na área visível do navegador. Versões pequenas, grandes e dinâmicas lidam com barras do navegador que aparecem ou desaparecem.

  51. 51 · Centro

    z-index z-index

    z-index é uma propriedade do CSS que define o nível da frente para trás de uma caixa posicionada. Em alguns casos, também cria um novo contexto de empilhamento local.