Box Model

CSS - Style Sheet

Professor: Jolvani
Aula 10 e 11

Box Model - CSS

Ol, Box Model um dos principais conceitos usados na construo de

nossas pginas.

O Box Model determina como os elementos so 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

Box Model - CSS

Composto por:

Preenchimento

Borda

Margem

Posio

Contedo contente

Possui largura, altura (width, height)

Entre o contedo e a borda existe o espaamento (padding)

Depois a borda e por fim a margem.

Para verificarmos os Boxs, instalamos um plugin no nosso Firefox o

firebug

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

Box Model - CSS

Identificando o elemento <p> no Firebug. Observe largura, altura,

espaamento, margem. Esse o box que est no elemento.

Box Model - CSS

Alteramos as margens e verificamos... estilo.css

Estamos usando o firebug

Box Model - CSS

Alteramos as margens e verificamos... estilo.css

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
declarao abreviada. Da seguinte forma:

Ao invs do anterior, simplificando nosso desenvolvimento. Ou

simplesmente uma das bordas. O navegador vai assumir que todas
outras so de mesmo tamanho.

Box Model - CSS

Pode ser aplicado dois valores somente: Topo = 50, direito = 20, abaixo
= 50 esquerdo = 20.

Trs valores: segue a mesma ordem: topo: 50, direito: 20, abaixo: 30,
esquerdo: 20.

Existem essas quatro formas...

Box Model - CSS

Propriedade padding: aqui = 0;

Ele pode ser apresentado das 4 maneiras como

nas bordas.

Box Model - CSS

Propriedade Border: aqui = 0;

Ele mais complexa que as anteriores.

Podemos usar as mesmas definies 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 tambm um estilo da borda... Ela permite a sintaxe abreviada acima. E

recebe 4 valores, solid, rideg, dotted, dashed, double, inset, outset

border-style: solid

Box Model - CSS

Propriedade Border

Podemos utilizar uma declarao abreviada para definir todos as

caractersticas da borda:

Prxima Aula: BoxModel