Quiz 10 - Introdução
1. O que o conceito de "Box Model" define no CSS?
A cor do fundo do site
A velocidade de carregamento das imagens
Como o tamanho, espaçamento e bordas de cada elemento são calculados
O número de links em uma página
*Explicação: O Box Model trata cada elemento HTML como uma caixa retangular composta por várias camadas.*
2. Qual parte do Box Model representa o espaço **interno** entre o conteúdo e a borda?
Margin
Border
Padding
Content
*Explicação: O Padding é o preenchimento interno, usado para dar "respiro" ao conteúdo dentro da caixa.*
3. Qual a diferença fundamental entre Margin e Padding?
Não há diferença, são sinônimos
Margin é o espaço externo (entre caixas); Padding é o espaço interno (dentro da caixa)
Margin só funciona em textos e Padding em imagens
Padding é sempre preto e Margin é transparente
*Explicação: Use margin para afastar elementos uns dos outros e padding para afastar o conteúdo da sua própria borda.*
4. Qual propriedade define a espessura, o estilo e a cor da "moldura" de um elemento?
`outline`
`box-style`
`border`
`margin`
*Explicação: A propriedade `border` permite configurar a linha que envolve o preenchimento e o conteúdo.*
5. Se um elemento tem `width: 200px` e `padding: 20px` nos quatro lados, qual será sua largura total na tela por padrão (sem `border-box`)?
200px
220px
240px
180px
*Explicação: O navegador soma a largura (200) + padding esquerdo (20) + padding direito (20), resultando em 240px.*
6. Para que serve a propriedade `box-sizing: border-box;`?
Para deixar as bordas arredondadas
Para garantir que o Padding e a Borda fiquem dentro da largura total definida, sem aumentar o tamanho da caixa
Para esconder a margem do elemento
Para mudar o tamanho da fonte automaticamente
*Explicação: Com `border-box`, a largura que você define é o tamanho total final da caixa, independentemente do padding ou borda.*
7. Como você aplicaria uma margem de `10px` apenas na parte superior de um elemento?
`margin: 10px;`
`margin-top: 10px;`
`top-margin: 10px;`
`padding-top: 10px;`
*Explicação: Usamos extensões como `-top`, `-bottom`, `-left` e `-right` para controlar lados específicos.*
8. O que acontece se definirmos `margin: auto;` em um elemento com uma largura (`width`) fixa?
O elemento desaparece
O elemento é centralizado horizontalmente dentro do seu container
O elemento ocupa toda a tela
O texto fica em negrito
*Explicação: `margin: auto` distribui o espaço disponível igualmente nos dois lados, centralizando o bloco.*
9. Qual o valor padrão da propriedade `box-sizing` na maioria dos navegadores (antes de alterarmos)?
`border-box`
`content-box`
`padding-box`
`margin-box`
*Explicação: O padrão `content-box` faz com que paddings e borders sejam somados ao valor da largura principal.*
10. Pode-se usar valores negativos na propriedade `margin`?
Sim, para aproximar ou sobrepor elementos
Não, o CSS só aceita números positivos
Sim, mas apenas em imagens
Apenas se o site estiver em modo escuro
*Explicação: Margens negativas são úteis em layouts avançados para criar efeitos de sobreposição ou "puxar" elementos.*