WDD 130: Fundamentos da Web

S02 – Atividade de Aprendizagem: Box Model no CSS

Visão Geral

O Box Model (Modelo de Caixa) do CSS é uma caixa que envolve cada elemento. De dentro para fora, o modelo define como o conteúdo, o padding (ou preenchimento), a borda e a margem são renderizados.

Preparação

Assista ao seguinte vídeo:

Vídeo: ▶️ Modelo de Caixa (Box Model)

Aqui está uma regra CSS para elementos div que define a largura e o box model. O conteúdo tem 400 pixels de largura e a altura é determinada pelo conteúdo real (mas não mostrado), seja ele qual for.

div {
  width: 400px;
  margin: 10px;
  border: 1px solid #000000;
  padding: 15px;  
}
Dimensões de Box Model Rotuladas sem border-box

Agora aplique a propriedade box-sizing de border-box a este mesmo exemplo.
Observe a diferença nas dimensões do conteúdo (área sombreada em azul):

div {
  box-sizing: border-box;
  width: 400px;
  margin: 10px;
  border: 1px solid #000000;
  padding: 15px;
}
Dimensões de Box Model Rotuladas sem border-box

Notação Abreviada do CSS

A notação abreviada do CSS geralmente é considerada a melhor prática para concisão, legibilidade e desempenho. No entanto, a notação por extenso tem suas utilidades e pode ser mais apropriada em certas situações em que a especificidade é necessária.

Resumo: Declarações Abreviadas no CSS usando a propriedade margin
Por extenso Abreviada 
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
 
margin: 10px 20px 30px 40px;
 
margin-top: 10px;
margin-right: 20px;
margin-bottom 30px;
margin-left: 20px;
 
margin: 10px 20px 30px;
As margens direita e esquerda são as mesmas, com 20 pixels. 
margin-top: 10px;
  margin-right: 20px;
  margin-bottom 10px;
  margin-left: 20px;
 
margin: 10px 20px;
As partes superior e inferior são iguais (10 pixels) e as margens direita e esquerda também (20 pixels). 
margin-top: 10px;
  margin-right: 10px;
  margin-bottom 10px;
  margin-left: 10px;
 
margin: 10px;
Todos os lados da margem têm 10 pixels.
Abreviação de Borda Comum 
border: 1px solid rgb(0 0 0 / .1);

Isso aplica uma borda de 1 pixel ao redor do elemento com uma linha sólida e uma cor que corresponde ao fundo do elemento contêiner/pai. A cor está definida como 10% de opacidade.

Instruções da Atividade

Arquivos

  1. Na sua pasta semana02, abra o arquivo chamado box-model.html.
  2. Na subpasta estilos dentro da pasta semana02, abra o arquivo CSS chamado box-model.css.

HTML

  1. No arquivo HTML box-model.html, crie um link para o arquivo CSS box-model.css, usando a tag <link>.
    Certifique-se de que esse elemento <link> esteja localizado na seção <head>.
    Avalie Seu Conhecimento 
    <link rel="stylesheet" href="estilos/box-model.css">
  2. Abra o arquivo box-model.html no Live/Five Server para visualizar as alterações conforme elas ocorrem nesta atividade.
    Neste ponto, o HTML é renderizado conforme mostrado aqui:
    Captura de tela do arquivo HTML com box model no início.
    Captura de tela do arquivo HTML com box model renderizado em um navegador

CSS

  1. Use os seletores CSS para estilizar os elementos HTML, de modo que fiquem iguais ao estilo mostrado nesta imagem:
    Captura de tela do exemplo de solução para a atividade de box model.
    Captura de Tela da Solução de Exemplo
  2. Escreva declarações CSS para estilizar os elementos HTML no arquivo box-model.css.
    Observe que as regras CSS foram iniciadas com os seletores apropriados.
    • classe callout
    • elemento img dentro da classe callout
    • elemento blockquote
    • elemento cite
    Use o seguinte resumo de declarações como guia:
    Elemento Declarações CSS Obrigatórias
    classe callout maximum width, margin, border, padding, background color e text color
    img position (float), margin, border, padding, background color, width, height
    blockquote margin
    cite display, top border, top padding, text alignment, size of font
  3. Compare seu trabalho com a solução de exemplo fornecida, chamada box-model-solucao.html.

    Você reparou nos elementos semânticos HTML usados para envolver a escritura e a referência à escritura?

    A escritura foi encapsulada com um elemento <blockquote> em vez de um elemento genérico <div> ou <p>

    A referência da escritura foi delimitada por um elemento <cite>.

    Não há nada de especial nesses elementos, exceto seus nomes semânticos e, talvez, o estilo padrão do navegador. No restante, eles se comportam e se parecem com qualquer outro elemento de bloco.

    Não se preocupe se você não usou essas informações no seu design. Refatorar o trabalho à medida que você descobre novos elementos e métodos faz parte do processo geral de desenvolvimento.

Discussão de Solução Opcional

Vídeo: ▶️ Atividade de Aprendizagem: Box-Model no CSS

Recursos Opcionais