Home
índice (CSS)
Página anterior

.

Box Model

Box Model, é um dos principais conceitos utilizado na construção do layout das páginas e a maioria das pessoas que começam a trabalhar com css, sabe pouco sobre o modelo de caixa ou box model. Na página da w3Schools existe uma sessão falando especificamente de box model demonstrando como ele é importante no desenvolvimento com css.

O box model determina a maneira como os elementos são exibidos e em certa medida como eles interagem entre si. Existem elementos inline, por exemplo: "spam", "em", (que dão ênfase a um trecho de texto do html) e elementos em bloco que dão uma quebra de linha, tanto acima quanto abaixo dele. Exemplo:

Elementos inline

Elementos em bloco

  1. p
  2. bloquote
  3. div Cada um dessses elementos é considerado uma caixa retangular.
Centro de Ajuda a Webmasters.>>>(Flutuação de Imagem)

Ou seja o box model está presente em cada um desses elementos, sejam inline, ou em bloco. Ele é composto de preenchimento, borda, margem, posição. Dentro do box model, vai o conteúdo que tem uma largura e uma altura. Os atributos width e height são aplicados dentro do box model. Logo após o conteúdo, entre ele e a borda, está o padding, espaçamento, e é ali o preenhimento entre o conteúdo e a borda. Tem também o atributo borda (pode-se fazer bordas de vários tipos, tracejadas, preenchidas, coloridas, com imagens. E logo após a borda, fica a margem, que define os limites entre um box model e outro.

Para fins de estudar o box model, será conveniente instalar no browser, firefox, (um plugin, o firebug, ferramenta para facilitar a visualização do box model de cada um dos elementos. Ir em ferramentas, opção complementos, escreva firebug. Pesquisar por firebug. Instalar o firebug no firefox. (Clicar em adicionar ao firefox). O internet explorer tem uma ferramenta similar. Essa é uma ferramenta que auxilia muito aos programadores de interface. Na verdade um programador profissional sempre terá um tipo de ferramenta como esta. Clicar em reiniciar o firefox, para ele aplicar o firebug. Clicar no botão vermelho -abrir Firebug em Nova janela- no canto direito da barra de menus. Para acessar clicar em F12.

Na folha de estilo ficaria assim:
p{
margin-top: 1px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 20px;
}
Procurar memorizar a ordem desses lados: topo, direito, a parte de baixo e a esquerda, porque nesta ordem pode ser feita uma declaração abreviada, dessa forma:
Forma reduzida com quatro valores:
p{
margin: 1px 50px 50px 20px;
}

Forma reduzida com três valores:
p{
margin: 50px 20px 30px;*/
}

/* Forma reduzida com dois valores:
p{
margin: 50px 20px;*/
}

Forma reduzida com um valor: O browser vai entender que é para aplicar em todos os lados do box model.
p{
margin: 50px;
}

O atributo padding

O atributo padding pode ser declarado da mesma forma:
margin: 1px 50px 50px 20px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
Ou desta forma:

Forma reduzida com um valor:
p{
margin: 50px 20px 30px;
padding:50px;
}

O atributo border

O atributo border, também pode ser declarado da mesma forma que margin e padding:
p{
margin: 50px 20px 30px;
padding:50px;
border-top-width:5px;
border-color: red;
Ou assim: p{
margin: 50px 20px 30px;
padding:50px;
border-width:2px 3px 4px 1px;
border-color: red yellow black cyan;
}
(Lembre-se de memorizar a ordem desses lados: topo, direito, a parte de baixo e a esquerda, porque nesta ordem pode ser feita uma declaração abreviada.

Estilos de borda:

p{
border-width:2px 3px 4px 1px;
border-color: blueb yellow black cyan;
border-style: ridge; /*borda com relevo*/
border-style: dotted; /*borda pontilhada*/
border-style: solid; /*borda sólida*/
border-style: dashed; /*borda traçejada*/
border-style: double; /*borda dupla*/
border-style: inset; /*borda mais clara nas laterais*/
border-style: outset; /*borda mais clara em cima laterais*/
}

Casa feita em css
Bordas
w3shools Bordas
regras-css