Laboratório de InformáticaBox Model Elementos em Bloco

1º Semestre 2009 > PUCPR > BSI

Bruno C. de PaulaBruno C. de Paula

Resumo da aula

Conhecemos, nas últimas aulas, diversos seletores e propriedades do CSS;Nosso objetivo hoje será conhecer as propriedades que lidam com modelo de caixa para elementos em bloco;Entendendo este modelo poderemos conseguir dimensionar facilmente os elementos da tela;

320/04/23

Material referente ao assunto da aulaO Box Model:

–http://www.pt-br.html.net/tutorials/css/lesson9.asp

Margin e Padding:–http://www.pt-br.html.net/tutorials/css

/lesson10.aspBordas:

–http://www.pt-br.html.net/tutorials/css/lesson11.asp

Altura e Largura:–http://www.pt-br.html.net/tutorials/css

/lesson12.asp

Material referente ao assunto da aula

Tutorial sobre o Box Model:–http://maujor.com/tutorial/csscaixa.ph

p

The Box Model:–http://css-tricks.com/the-css-box-mod

el/

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c

apítulo.

520/04/23

620/04/23

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

720/04/23

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)

margin-top, margin-right, margin-bottom, margin-left, margin: determina a margem de um elemento;

padding-top, padding-right, padding-bottom, padding-left, padding: determina o “enchimento” (espaçamento) de um elemento.

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)

border-top-color, border-top-style, border-top-width, border-top, border-right-color, border-right-style, border-right-width, border-right, border-bottom-color, border-bottom-style, border-bottom-width, border-bottom, border-left-color, border-left-style, border-left-width, border-left, border-color, border-style, border-width, border: modifica a borda de um elemento.

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)outline-color, outline-style, outline-width

, outline: determina a linha de contorno ao redor de um elemento;

height: modifica a altura da área de conteúdo de um elemento;

min-height: altura mínima de um elemento;

max-height: altura máxima de um elemento;

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)

width: largura da área de conteúdo de um elemento;

min-width: largura mínima da área de conteúdo de um bloco;

max-width: largura máxima da área de conteúdo de um bloco;

1220/04/23

Exemplos da aula

Exemplo Margem Padrão;Exemplo Margin Exemplo Margin AutoExemplo Margin EmExemplo Margin NegativaExemplo Margin PorcentagemExemplo Margin ResumidaExemplo Margin Resumida2

Exemplos da aula

Exemplo BorderExemplo Border EspecíficaExemplo Border ResumidaExemplo Box ModelExemplo PaddingExemplo Width Height Exemplo Rollover

1320/04/23

Existem 2 tipos de elementos em CSSNão-substituídos:

–Maioria dos elementos;

– Conteúdo apresentado em uma caixa gerada pelo próprio elemento;

<p></p><span></span>...

Existem 2 tipos de elementos em CSS

Substituídos:–Minoria;–Conteúdo é

substituído por algo que não é diretamente o conteúdo;

–Também estão dentro de uma caixa;

<img src=“”/><input type=“text”/>

Existem 2 tipos básicos de função de exibição de elemento

Nível de bloco:–Quebra de linha

antes e depois da caixa do elemento;

–Se quiser mudar um elemento para bloco, usar display: block!

<p>Parágrafo</p><div></div><li>Item de

lista</li>

Existem 2 tipos básicos de função de exibição de elemento

Nível inline:–Não há quebra

de linha antes e depois do elemento;

<a href=“”></a><span></span><em></em>

Hoje, vamos trabalhar apenas com elementos de bloco

1820/04/23

Todos os elementos em CSS estão dentro de uma caixa

Box model para elementos em bloco

Box model para elementos em blocoIE (6 e 7) x Resto do Mundo

Visualizar o Box Model com FirebugInstalar o Firebug:

– (Na PUCPR já está instalado)–http://www.getfirebug.com

Tecla F12!

2220/04/23

Margem

Transparente;Largura do

elemento (width) não inclui a margem;

2320/04/23

Todo elemento possui uma margem padrãoCada navegador pode usar valores

diferentes;

Parágrafos no Firefox: –margin-top: 16px;–margin-bottom: 16px;

2420/04/23

CSS Reset para margens

Elimina problemas com as margens padrão diferentes para cada navegador;

* {–margin: 0;–}

2520/04/23

2620/04/23

MargensEspecíficas

2720/04/23

Visualização com o Firebug

Margens não se somam!O que vale é o maior valor!30px de top + 50px de bottom = 50px de distância;

2820/04/23

Representação resumida (shorthand) / 4 valores

margin: top right bottom left;Sentido horário (TRouBLe);

2920/04/23

Representação resumida (shorthand) / 1 valor

3020/04/23

Representação resumida(shorthand) / 2 valores

3120/04/23

Porcentagens se referem ao valor de width (largura)

3220/04/23

1664 * 10% = 166

“em” se refere ao tamanho da letra (font-size)

3320/04/23

16px = 1em Na minha configuração!

Margens podem ser negativas

3420/04/23

Margens negativas podem ser usadas para esconder elementos;Máximo: -9999px;

Margin com valor auto

Deixar o browser calcular a margem automaticamente;

Pode ser usado para centralizar elementos (esquerda e direita igual);

3520/04/23

BordasNão devem ser consideradas para a

largura (width) do elemento;Estilo:

– Propriedade border-style– dashed, dotted, double, groove, inset,

outset, ridge, solid;Cor:

– Propriedade border-color;Largura:

– Propriedade border-width;

3620/04/23

Larguras de borda

3720/04/23

Estilos de borda

3820/04/23

3920/04/23

4020/04/23

Representação resumida(shorthand)

4120/04/23

Bordas específicas

4220/04/23

Espaçamento (padding)

Distância entre a borda e o conteúdo;Sempre transparente;Cada elemento tem um valor padrão

diferente;Não existe valor negativo;padding-top, padding-right, padding-

left, padding (resumida);

4320/04/23

CSS Reset para padding

* {–padding:0;

}

4420/04/23

4520/04/23

Largura da caixa

4620/04/23

Altura da caixa

4720/04/23

4820/04/23

Largura = 25 + 15 + 15 + 1 + 1 = 57 Altura = 7 + 15 + 15 + 1 + 1 = 39

4920/04/23

Próximas aulas de CSS

CSS Posicionamento;Menus;Botões;Forms...