A primeira escola especializada em tecnologia do Alto Solimões, com corpo técnico formado na área.

A trilha
Projetos
Quem somos
Impacto
Para instituições
Blog

WhatsApp Avise quando abrir a turma

Início
Cursos livres
CSS do zero
Módulo 2: Caixa, tipo e espaço

Fecho de módulo

Módulo 2: Caixa, tipo e espaço

18 perguntas das 3 aulas deste módulo.

Revise o módulo

Errar aqui não custa nada - a explicação vem junto da correção, e dá para responder quantas vezes quiser.

Pergunta 1 de 18

Um botão com fundo verde recebe `padding: 12px`. E se fosse `margin: 12px`?

Com padding o verde ocupa os 12px; com margin, nãoAO verde ocuparia os 12px nos dois casosBNos dois casos o verde pararia na borda do textoCCom margin o verde ocupa os 12px; com padding, nãoD

`.caixa { width: 300px; padding: 20px; border: 2px }` sem `border-box`. Quanto ela ocupa?

340px, somando só o padding dos dois ladosA322px, somando a borda dos dois ladosB344px, somando padding e borda dos dois ladosC300px, porque `width` já inclui tudoD

Um parágrafo tem `margin-bottom: 20px` e o seguinte tem `margin-top: 30px`. Quanto fica entre eles?

25px, porque o navegador tira a médiaA50px, porque as margens se somamB20px, porque a primeira declarada prevaleceC30px, porque a maior absorve a menorD

Por que o envelope da página usa `max-width: 72rem` e não `width: 72rem`?

Porque `width` fixo cria rolagem horizontal numa tela estreitaAPorque `width` seria ignorado dentro de um contêiner flexBPorque `max-width` aceita unidades relativas e `width` nãoCPorque `max-width` centraliza sozinho, sem `margin: auto`D

Por que o primeiro filho do cartão recebe `margin-top: 0`?

Porque títulos dentro de cartão não devem ter margem nenhumaAPorque sem isso o título fica centralizado verticalmenteBPorque a margem do título somaria ao padding e desalinharia os cartõesCPorque `margin-top` num cartão colapsa com a borda e someD

Onde deve morar a largura máxima de leitura, usada nas seis páginas?

No `body`, para valer no documento inteiro por herançaANuma regra por seção, ajustada ao conteúdo de cada umaBEm cada página, dentro de um `<style>` próprioCNuma classe única, aplicada onde há texto corridoD

Por que `font-family` recebe uma lista, e não um nome só?

Porque a primeira vale no desktop e a última no celularAPorque uma delas precisa ser instalada e a outra baixadaBPorque o navegador mistura as fontes conforme o caractereCPorque é uma fila: não tendo a primeira, o navegador tenta a seguinteD

Por que `line-height: 1.6` e não `line-height: 24px`?

Porque sem unidade ele acompanha o tamanho da fonte de cada elementoAPorque `px` em altura de linha desativa o zoom do navegadorBPorque o valor com unidade é ignorado em elementos herdadosCPorque o valor sem unidade é calculado uma vez e fica em cacheD

Qual é o piso de tamanho para texto corrido numa página?

20px, recomendado para leitura no celularA16px, que é o padrão do próprio navegadorB12px, que ainda é legível numa tela boaC14px, o padrão de muitos sistemas de designD

O que `font-size: clamp(2.5rem, 8vw, 6rem)` faz com o nome na abertura?

Alterna entre os três valores conforme a orientação da telaAMede 8% da largura, nunca abaixo de 2,5rem nem acima de 6remBFixa em 8vw, e usa os outros dois só se o `vw` falharCAplica 2,5rem no celular e 6rem no desktop, sem meio-termoD

Por que limitar o texto corrido a cerca de 65 caracteres por linha?

Porque o navegador quebra a palavra acima desse limiteAPorque leitores de tela param a leitura em linhas longasBPorque linhas longas atrasam a renderização da páginaCPorque linhas longas fazem o olho errar o retorno e relerD

O selo está escrito "Disponível para projetos" no HTML e aparece em maiúsculas por CSS. O leitor de tela anuncia o quê?

As letras soletradas, uma a umaAO texto original, em minúsculasBDepende de o elemento ter `aria-label`CO texto em maiúsculas, como aparece na telaD

Você põe `margin-top: 16px` num `<span>` e nada acontece. Por quê?

Elementos `inline` não aceitam margem vertical nem medidasAFalta declarar `position: relative` no elementoB`<span>` não aceita nenhuma propriedade de espaçamentoCA margem de um `<span>` colapsa com a do parágrafoD

Qual é a diferença entre `display: none` e `visibility: hidden`?

`none` some do layout e da leitura; `hidden` mantém o espaçoA`none` esconde da tela e mantém para o leitor de telaB`hidden` só funciona em elementos com `position` declaradaC`hidden` some do layout e da leitura; `none` mantém o espaçoD

Para que serve a classe `.apenas-leitor`, com `clip-path: inset(50%)`?

Recortar a imagem pela metade dentro do cartãoASumir da tela e continuar sendo anunciada por quem ouveBDeixar o texto em cinza-claro, quase invisívelCEsconder o elemento de todos, como `display: none`D

O selo "no ar" com `position: absolute` foi parar no canto da página, não do cartão. O que falta?

`position: relative` no cartãoATrocar `absolute` por `fixed` no seloBUm `z-index` maior no seloCDeclarar `overflow: hidden` no cartãoD

A barra de topo tem `position: sticky` e não gruda. O que quase sempre falta?

Um `z-index` acima do conteúdo que rolaAUma altura mínima no elemento que a contémBUm `height` fixo declarado no cabeçalhoCUm `top` dizendo em que altura ela deve pararD

Você precisou de `z-index: 9999` para um elemento aparecer. O que isso costuma indicar?

Que a organização das sobreposições está pedindo revisãoAQue falta declarar `position` no elemento de baixoBQue o navegador limita `z-index` a valores altosCQue a página tem muitas camadas e o número precisa acompanharD

Maiyu Academy

A primeira escola especializada em tecnologia do Alto Solimões, com corpo técnico formado na área.

Aulas presenciais aos sábados em Benjamin Constant, no CETI Aristélio Sabino de Oliveira.

Benjamin Constant, AM, Brasil

Cursos

Robótica Desenvolvimento web A trilha inteira Cursos livres e gratuitos

A escola

Quem somos Impacto Projetos Para instituições Blog

Contato

(97) 98431-7149 maiyu.academy

Privacidade Termos de uso