Aula 10
box Model
Aula 10
box Model
Prof. Paulo Cesar F. De Oliveira,
BSc, PhD
27/05/15 © P C F de Oliveira 2015 2
Modelo
de
Box
Model
Todo
elemento
é uma
caixa
Box
Model
Área de Conteúdo Área de Margem
width - height
Especifica
dimensões
p { width: 350px;
height: 150px;
}
27/05/15 © P C F de Oliveira 2015 8
porcentagem
auto
comprimento
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
p.A { width: 400px;
height: 100px;
background: #C2F670;
}
p.B { width: 150px;
height: 300px;
background: #C2F670;
}
</style>
</head>
27/05/15 © P C F de Oliveira 2015 10
Exemplo
<body>
<p class="A">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vestibulum eu nunc
ac arcu lobortis fringilla vel in mauris.
Curabitur at euismod nunc. Sed sed turpis non
quam scelerisque malesuada. Fusce nec blandit
massa. Suspendisse porttitor, ex viverra
pulvinar blandit. </p>
Exemplo
<p class="B">Quisque elementum efficitur
efficitur. Aliquam erat volutpat. Suspendisse
vel magna at eros dignissim convallis. Quisque
pellentesque lacus sed arcu mattis, nec
fringilla nisi consectetur. Nunc vulputate
aliquet orci, elementum condimentum turpis
consectetur id. Cras at bibendum elit, ac
rutrum lacus. </p>
</body>
</html>
27/05/15 © P C F de Oliveira 2015 12
overflow
Ação a
tomar se
conteúdo é
div {
overflow: auto;
}
27/05/15 © P C F de Oliveira 2015 14 hidden scroll auto visible inherit
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: #00FFFF;
width: 100px;
height: 100px;
overflow: scroll;
}
27/05/15 © P C F de Oliveira 2015 16
Exemplo
div.hidden {
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
}
div.visible {
background-color: #00FF88;
width: 100px;
height: 100px;
overflow: visible;
}
</style>
</head>
Exemplo
<body>
<p>A propriedade overflow especifica o que
fazer caso o conteúdo de um elemento exceda o
tamanho da caixa do elemento.</p>
<p>Resultado com overflow:scroll</p>
<div class="scroll">Você pode usar a
propriedade overflow quando quiser ter um
melhor controle do layout. O valor padrão
(default) é visible.</div>
27/05/15 © P C F de Oliveira 2015 18
Exemplo
<p>Resultado com overflow:hidden</p>
<div class="hidden">Você pode usar a
propriedade overflow quando quiser ter um
melhor controle do layout. O valor padrão
(default) é visible.</div>
<p>Resultado com overflow:visible</p>
<div class="visible">Você pode usar a
propriedade overflow quando quiser ter um
melhor controle do layout. O valor padrão
(default) é visible.</div>
</body>
</html>
27/05/15 © P C F de Oliveira 2015 20
padding
Espaço
entre área
de
conteúdo e
borda
blockquote {
padding-top: 1em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 3em;
}
porcentagem padding-top padding-right padding-bottom padding-left comprimento inherit
27/05/15 © P C F de Oliveira 2015 22
padding
Espaço
entre área
de
conteúdo e
borda
blockquote {
padding: 1em 3em 1em 3em;
background-color: #D098D4;
}
porcentagem top right bottom left comprimento inherit
27/05/15 © P C F de Oliveira 2015 24
<p>
top
right
bottom
left
1
2
3
4
Valores Abreviados
1 Valor
padding: 10px;
27/05/15 © P C F de Oliveira 2015 26
Valores Abreviados
2 Valores
padding: 10px 6px;
Primeiro: topo e inferior
Valores Abreviados
3 Valores
padding: 10px 6px 4px;
Primeiro: topo
Segundo: esquerda e direita
Terceiro: inferior
27/05/15 © P C F de Oliveira 2015 28
Valores Abreviados
4 Valores
padding: 10px 6px 4px 10px;
Sentido horário:
topo, direita, inferior,
esquerda
<!DOCTYPE html> <html> <head> <style> p.ex1 { padding: 10px 10px 10px 50%; background-color: #D098D4; } p.ex2 { padding: 100px 10px 10px 100px; background-color: #D098D4; }
Exemplo
p.ex3 { padding: 100px 5px; background-color: #D098D4; } p.ex4 { padding: 10px 33%; background-color: #D098D4; } </style> </head> 27/05/15 © P C F de Oliveira 2015 30
Exemplo
<body>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula enim sed enim aliquam viverra. Aenean id leo vitae odio tristique dapibus in at lacus. </p>
<p class="ex2">Curabitur sapien nisi,
scelerisque id aliquam eget, vehicula vitae ipsum. Integer congue nunc purus, vel interdum turpis
suscipit eget. Proin finibus risus nunc, sed dapibus neque bibendum id. </p>
Exemplo
<p class="ex3">Suspendisse id diam lacinia, consequat sem et, dictum sem. Curabitur fermentum arcu at volutpat tristique. Quisque nec risus in neque interdum lacinia eu non nibh. </p>
<p class="ex4">Curabitur ac luctus purus, in eleifend libero. Nam imperdiet odio mauris,
elementum egestas quam vulputate eget. Nunc
convallis nisl et libero iaculis luctus vitae ac purus. </p>
</body> </html>
27/05/15 © P C F de Oliveira 2015 32
Exemplo
27/05/15 © P C F de Oliveira 2015 34
27/05/15 © P C F de Oliveira 2015 36
border-xxxx-style
Aplicar um
estilo para
div#menu {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
width: 300px;
height: 100px;
27/05/15 © P C F de Oliveira 2015 38
border-style
Aplicar um
estilo para
bordas
div#menu {
border-style: solid dashed double dotted;
width: 300px;
height: 100px;
}
dotted dashed solid double groove ridge inset outset none/hidden
27/05/15 © P C F de Oliveira 2015 40
Exemplo
<!DOCTYPE html> <html> <head> <style>p.none {border-style: none;}
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} </style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p> <p class="dashed">A dashed border.</p> <p class="solid">A solid border.</p> <p class="double">A double border.</p> <p class="groove">A groove border.</p> <p class="ridge">A ridge border.</p> <p class="inset">An inset border.</p> <p class="outset">An outset border.</p> <p class="hidden">A hidden border.</p> </body>
</html>
Exemplo
27/05/15 © P C F de Oliveira 2015 42
border-xxxx-width
Especificar
espessura
div#help {
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 12px;
width: 300px;
height: 100px;
27/05/15 © P C F de Oliveira 2015 44
border-width
Especificar
espessura
das bordas
div#help {
border-style: solid;
border-width: thin medium thick 12px;
width: 300px;
height: 100px;
}
thin
medium
thick
27/05/15 © P C F de Oliveira 2015 46
Exemplo
<!DOCTYPE html> <html> <head> <style> p.one { border-style: solid;border-width: thin medium thick 12px; width: 300px;
height: 100px; }
</style> </head>
<body>
<p class="one">Um texto qualquer.</p>
<p><em>Nota:</em> A propriedade "border-width" não funciona se usada sozinha. Deve-se acrescentar a propriedade "border-style" para configurar as
bordas primeiro. </p> </body>
</html>
Exemplo
27/05/15 © P C F de Oliveira 2015 48
border-xxxx-color
Especificar
cor das
div#especial {
border-style: solid;
border-top-color: maroon;
border-right-color: aqua;
border-bottom-color: blue;
border-left-color: yellow;
border-width: 6px;
width: 300px;
height: 100px;
27/05/15 © P C F de Oliveira 2015 50
border-color
Especificar
cor das
bordas
div#especial {
border-style: solid;
border-color: maroon aqua;
border-width: 6px;
width: 300px;
height: 100px;
}
transparent
nome/valor RGB
27/05/15 © P C F de Oliveira 2015 52
Exemplo
<!DOCTYPE html> <html> <head> <style> p.um { border-style: solid; border-color: #0000ff; } p.dois { border-style: solid; border-color: #ff0000 #0000ff; }p.tres { border-style: solid; border-color: #ff0000 #00ff00 #0000ff; } p.quatro { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255); } </style> </head>
Exemplo
<body>
<p class="um">bordas com uma cor!</p>
<p class="dois">bordas com duas cores!</p> <p class="tres">bordas com tres cores!</p>
<p class="quatro">bordas com quatro cores!</p> <p><em>Nota:</em> A propriedade "border-color" não funciona se usada sozinha. Deve-se acrescentar a propriedade "border-style" para configurar as bordas primeiro.</p>
</body> </html>
27/05/15 © P C F de Oliveira 2015 54
Exemplo
27/05/15 © P C F de Oliveira 2015 56
Atenção
Pode-se combinar
estilo, espessura e cor
da borda em uma única
declaração
border-xxxx
Especificar
aparência
h1 {
border-left: yellow 0.5em solid;
}
h2 {
border-bottom: 1px solid;
}
27/05/15 © P C F de Oliveira 2015 58 border-width border-color border-style inherit
Modificar para
lados específicos:
top, right,
bottom, left
border
Especificar
para todos
p.exemplo {
border: 2px dotted #663;
}
27/05/15 © P C F de Oliveira 2015 60 border-width border-color border-style inherit
Modificar para
os 4 lados de
uma só vez
margin-xxxx
Especificar
margem
p#B {
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;
}
27/05/15 © P C F de Oliveira 2015 62 porcentagem auto comprimento inherit
Modificar para
lados específicos:
top, right,
bottom, left
margin
Especificar
para todos
p#C {
margin: 0 4em;
border: 1px solid red;
}
27/05/15 © P C F de Oliveira 2015 64 porcentagem auto comprimento inherit
Modificar para
os 4 lados de
uma só vez
Exemplo
<!DOCTYPE html> <html> <head> <style> p.ex1 { margin: 2cm 4cm 3cm 4cm; } </style> </head> <body><p>Um parágrafo sem margens especificadas.</p> <p class="ex1">Um parágrafo com margens
especificadas.</p>
<p>Um parágrafo sem margens especificadas.</p> </body>
27/05/15 © P C F de Oliveira 2015 66
Dica
Acrescentar uma
margem ao elemento
body adiciona espaços
entre o conteúdo da
página e os limites da
janela do browser
27/05/15 © P C F de Oliveira 2015 68
Exemplo
<!DOCTYPE html> <html> <head> <style> p.A { margin: 4em;border: 1px solid red; background: #FCF2BE; } p.B { margin-top: 2em; margin-right: 250px; margin-bottom: 1em; margin-left: 4em;
border: 1px solid red; background: #FCF2BE;
}
body {
margin: 0 10%;
border: 1px solid red; background: #BBE09F;
}
</style> </head>
<body>
<p class="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis sem,
volutpat feugiat egestas non, luctus ac felis. Cras elementum erat sed sapien molestie, nec pharetra
leo pulvinar. Nunc euismod efficitur fermentum. Nam volutpat nulla at tempus finibus.</p>
Exemplo
<p class="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis sem, volutpat feugiat
egestas non, luctus ac felis. Cras elementum erat sed
sapien molestie, nec pharetra leo pulvinar. Nunc euismod efficitur fermentum. Nam volutpat nulla at tempus
finibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis sem, volutpat feugiat egestas non, luctus ac felis. Cras elementum erat sed sapien
molestie, nec pharetra leo pulvinar. Nunc euismod efficitur fermentum. Nam volutpat nulla at tempus finibus.</p>
</body> </html>
27/05/15 © P C F de Oliveira 2015 70
Exemplo
27/05/15 © P C F de Oliveira 2015 72
