Este documento resume os principais conceitos do box model no CSS, incluindo que cada elemento da página é representado por um box model composto por preenchimento, borda, margem e conteúdo. Explica como identificar e alterar as propriedades desses elementos usando o plugin Firebug no Firefox.

1. Box Model
CSS - Style Sheet
Professor: Jolvani
Aula 10 e 11

2. Box Model - CSS
 Olá, Box Model é um dos principais conceitos usados na construção de
nossas páginas.
 O Box Model determina como os elementos são exibidos e como
interagem entre si.
 Cada elemento (in-line ou em bloco) esta representado por um box
model, ou seja, O box model esta presente em cada elemento seja ele
in-line ou elemento de bloco

3. Box Model - CSS
 Composto por:
 Preenchimento
 Borda
 Margem
 Posição
 Conteúdo “contente”
 Possui largura, altura (width, height)
 Entre o conteúdo e a borda existe o espaçamento (padding)
 Depois a borda e por fim a margem.
 Para verificarmos os Boxs, instalamos um plugin no nosso Firefox o
“firebug”

4. Box Model - CSS
 Para isso, no Firefox, vá em ferramentas -> complementos e pesquise
por Firebug. Depois é só adicionar ou instalar.
 Reinicie o Firefox.
 Para acessar o Firebug, pressiona a tecla f12

5. Box Model - CSS
 Identificando o elemento <p> no Firebug. Observe largura, altura,
espaçamento, margem. Esse é o box que está no elemento.

6. Box Model - CSS
 Alteramos as margens e verificamos... estilo.css
 Estamos usando o firebug

7. Box Model - CSS
 Alteramos as margens e verificamos... estilo.css

8. Box Model - CSS
 Vejamos no box model ....
 Observe, colocamos margens no topo, direta, abaixo e esquerda.
Procure decorar essa ordem... Pois nessa ordem podemos fazer uma
declaração abreviada. Da seguinte forma:
 Ao invés do anterior, simplificando nosso desenvolvimento. Ou
simplesmente uma das bordas. O navegador vai assumir que todas
outras são de mesmo tamanho.

9. Box Model - CSS
 Pode ser aplicado dois valores somente: Topo = 50, direito = 20, abaixo
= 50 esquerdo = 20.
 Três valores: segue a mesma ordem: topo: 50, direito: 20, abaixo: 30,
esquerdo: 20.
 Existem essas quatro formas...

10. Box Model - CSS
 Propriedade padding: aqui = 0;
 Ele pode ser apresentado das 4 maneiras como
nas bordas.

11. Box Model - CSS
 Propriedade Border: aqui = 0;
 Ele é mais complexa que as anteriores.
 Podemos usar as mesmas definições da seguinte maneira:
 border-top-width: 2px (representando a largura), border-right-width:
5px ... Assim por diante; ou simplesmente border-width: 5px para todos
os lados. Ou border-width: 3px 2px 3px 2px;
 Só que para ver a borda precisamos atribuir uma cor a ela.... Border-
color: red; ou border-top-color: red; ou ainda border-color: red green
yellow cyan;
 E também um estilo da borda... Ela permite a sintaxe abreviada acima.
E recebe 4 valores, solid, rideg, dotted, dashed, double, inset, outset
 border-style: solid

12. Box Model - CSS
 Propriedade Border
 Podemos utilizar uma declaração abreviada para definir todos as
características da borda:

13. Próxima Aula: BoxModel