Box ModelCSS - Style Sheet

Professor: Jolvani

Aula 10 e 11

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

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”

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, espaçamento, 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 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.

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

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

Box Model - CSS Propriedade Border

Podemos utilizar uma declaração abreviada para definir todos as características da borda:

Próxima Aula: BoxModel