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.
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: