Bruno C. de Paula
Laboratório de Informática
Box Model
Elementos em Bloco
1º Semestre 2009 > PUCPR > BSI
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;
Material referente ao assunto da aula
O Box Model:
– http://www.ptbr.html.net/tutorials/css/lesson9.asp
Margin e Padding:
– http://www.ptbr.html.net/tutorials/css/lesson10.asp
Bordas:
– http://www.ptbr.html.net/tutorials/css/lesson11.asp
Altura e Largura:
– http://www.ptbr.html.net/tutorials/css/lesson12.asp
05/11/2015
3
Material referente ao assunto da aula
Tutorial sobre o Box Model:
– http://maujor.com/tutorial/csscaixa.p
hp
The Box Model:
– http://css-tricks.com/the-css-boxmodel/
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
05/11/2015
5
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>.
05/11/2015
6
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>;
05/11/2015
7
Propriedades CSS referenciadas na
aula (em Inglês – Sitepoint)
margin-top, margin-right, marginbottom, margin-left, margin: determina
a margem de um elemento;
padding-top, padding-right, paddingbottom, 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, borderright-color, border-right-style, borderright-width, border-right, borderbottom-color, border-bottom-style,
border-bottom-width, border-bottom,
border-left-color, border-left-style,
border-left-width, border-left, bordercolor, border-style, border-width,
border: modifica a borda de um
elemento.
Propriedades CSS referenciadas na
aula (em Inglês – Sitepoint)
outline-color, outline-style, outlinewidth, 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;
Exemplos da aula
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
05/11/2015
Margem Padrão;
Margin
Margin Auto
Margin Em
Margin Negativa
Margin Porcentagem
Margin Resumida
Margin Resumida2
12
Exemplos da aula
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
05/11/2015
Border
Border Específica
Border Resumida
Box Model
Padding
Width Height
Rollover
13
Existem 2 tipos de elementos em
CSS
Nãosubstituí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: <img src=“”/>
– Minoria;
<input type=“text”/>
– Conteúdo é
substituído por
algo que não é
diretamente o
conteúdo;
– Também estão
dentro de uma
caixa;
Existem 2 tipos básicos de função de
exibição de elemento
Nível de bloco: <p>Parágrafo</p>
– Quebra de linha <div></div>
antes e depois <li>Item de
da caixa do
lista</li>
elemento;
– Se quiser mudar
um elemento
para bloco, usar
display: block!
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
05/11/2015
18
Todos os
elementos em
CSS estão
dentro de
uma caixa
Box model para elementos em
bloco
Box model para elementos em bloco
IE (6 e 7) x Resto do Mundo
Visualizar o Box Model com
Firebug
Instalar o Firebug:
– (Na PUCPR já está instalado)
– http://www.getfirebug.com
Tecla F12!
05/11/2015
22
Margem
Transparente;
Largura do
elemento
(width) não
inclui a
margem;
05/11/2015
23
Todo elemento possui uma
margem padrão
Cada navegador pode usar valores
diferentes;
Parágrafos no Firefox:
– margin-top: 16px;
– margin-bottom: 16px;
05/11/2015
24
CSS Reset para margens
Elimina problemas com as margens
padrão diferentes para cada
navegador;
* {
– margin: 0;
–}
05/11/2015
25
Margens
Específicas
05/11/2015
26
Visualização com o Firebug
05/11/2015
27
Margens não se somam!
O que vale é o maior valor!
30px de top + 50px de bottom =
50px de distância;
05/11/2015
28
Representação resumida
(shorthand) / 4 valores
margin: top right bottom left;
Sentido horário (TRouBLe);
05/11/2015
29
Representação resumida
(shorthand) / 1 valor
05/11/2015
30
Representação resumida
(shorthand) / 2 valores
05/11/2015
31
Porcentagens se referem ao valor
de width (largura)
1664 * 10% = 166
05/11/2015
32
“em” se refere ao tamanho da
letra (font-size)
16px = 1em
Na minha configuração!
05/11/2015
33
Margens podem ser negativas
Margens negativas podem ser usadas
para esconder elementos;
Máximo: -9999px;
05/11/2015
34
Margin com valor auto
Deixar o browser calcular a margem
automaticamente;
Pode ser usado para centralizar
elementos (esquerda e direita igual);
05/11/2015
35
Bordas
Nã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;
05/11/2015
36
Larguras de borda
05/11/2015
37
Estilos de borda
05/11/2015
38
05/11/2015
39
05/11/2015
40
Representação resumida
(shorthand)
05/11/2015
41
Bordas específicas
05/11/2015
42
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, paddingleft, padding (resumida);
05/11/2015
43
CSS Reset para padding
* {
–padding:0;
}
05/11/2015
44
05/11/2015
45
Largura da caixa
05/11/2015
46
Altura da caixa
05/11/2015
47
Largura = 25 + 15 + 15 + 1 + 1 = 57
Altura = 7 + 15 + 15 + 1 + 1 = 39
05/11/2015
48
Próximas aulas de CSS
CSS Posicionamento;
Menus;
Botões;
Forms...
05/11/2015
49