Post on 28-Jul-2020
Aula 10box Model
Aula 10box Model
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
27/05/15 © P C F de Oliveira 2015 1
27/05/15 © P C F de Oliveira 2015 2
Modelo de
Caixa?
27/05/15 © P C F de Oliveira 2015 3
BoxModel
Todo elemento
é uma caixa
27/05/15 © P C F de Oliveira 2015 4
27/05/15 © P C F de Oliveira 2015 5
Box Model
Área de Conteúdo
Área de Margem
Área de Padding
27/05/15 © P C F de Oliveira 2015 6
27/05/15 © P C F de Oliveira 2015 7
width - height
Especifica dimensões da área de conteúdo
p { width: 350px;height: 150px;
}
27/05/15 © P C F de Oliveira 2015 8
porcentagem
auto
comprimento
inherit
27/05/15 © P C F de Oliveira 2015 9
Exemplo<!DOCTYPE html><html><head>
<style> p.A { width: 400px;
height: 100px; background: #C2F670;
}p.B { width: 150px;
height: 300px; background: #C2F670;
} </style>
</head>Continua no próximo slide…
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 nuncac arcu lobortis fringilla vel in mauris. Curabitur at euismod nunc. Sed sed turpis non quam scelerisque malesuada. Fusce nec blanditmassa. Suspendisse porttitor, ex viverrapulvinar blandit. </p>
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 11
Exemplo
<p class="B">Quisque elementum efficiturefficitur. Aliquam erat volutpat. Suspendissevel magna at eros dignissim convallis. Quisquepellentesque lacus sed arcu mattis, necfringilla nisi consectetur. Nunc vulputatealiquet orci, elementum condimentum turpisconsectetur id. Cras at bibendum elit, ac rutrum lacus. </p></body></html>
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 12
Resultado
27/05/15 © P C F de Oliveira 2015 13
overflow
Ação a tomar se
conteúdo émuito grande
div { overflow: auto;
}
27/05/15 © P C F de Oliveira 2015 14
hidden
scroll
auto
visible
inherit
27/05/15 © P C F de Oliveira 2015 15
Exemplo<!DOCTYPE html><html><head>
<style>div.scroll {
background-color: #00FFFF; width: 100px; height: 100px; overflow: scroll;
}
Continua no próximo slide…
27/05/15 © P C F de Oliveira 2015 16
Exemplodiv.hidden { background-color: #00FF00; width: 100px; height: 100px; overflow: hidden;
}div.visible {
background-color: #00FF88; width: 100px; height: 100px; overflow: visible;
}</style>
</head>
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 17
Exemplo<body>
<p>A propriedade overflow especifica o quefazer 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>
Continuação do slide anterior
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>
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 19
Resultado
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;
}
27/05/15 © P C F de Oliveira 2015 21
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;
}
27/05/15 © P C F de Oliveira 2015 23
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
27/05/15 © P C F de Oliveira 2015 25
Valores Abreviados
1 Valorpadding: 10px;
Aplicado a todos os lados
27/05/15 © P C F de Oliveira 2015 26
Valores Abreviados
2 Valorespadding: 10px 6px;
Primeiro: topo e inferiorSegundo: esquerda e direita
27/05/15 © P C F de Oliveira 2015 27
Valores Abreviados
3 Valorespadding: 10px 6px 4px;
Primeiro: topoSegundo: esquerda e direitaTerceiro: inferior
27/05/15 © P C F de Oliveira 2015 28
Valores Abreviados
4 Valorespadding: 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;
}
27/05/15 © P C F de Oliveira 2015 29
Exemplo
Continua no próximo slide…
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
Continuação do slide anterior
<body><p class="ex1">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec vehicula enimsed enim aliquam viverra. Aenean id leo vitae odiotristique dapibus in at lacus. </p>
<p class="ex2">Curabitur sapien nisi, scelerisque id aliquam eget, vehicula vitae ipsum. Integer congue nunc purus, vel interdum turpissuscipit eget. Proin finibus risus nunc, seddapibus neque bibendum id. </p>
27/05/15 © P C F de Oliveira 2015 31
Exemplo
Continuação do slide anterior
<p class="ex3">Suspendisse id diam lacinia, consequat sem et, dictum sem. Curabitur fermentumarcu 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. Nuncconvallis nisl et libero iaculis luctus vitae ac purus. </p>
</body></html>
27/05/15 © P C F de Oliveira 2015 32
Exemplo
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 33
Resultado
27/05/15 © P C F de Oliveira 2015 34
Resultado
27/05/15 © P C F de Oliveira 2015 35
Resultado
27/05/15 © P C F de Oliveira 2015 36
Resultado
27/05/15 © P C F de Oliveira 2015 37
border-xxxx-style
Aplicar um estilo para
bordas
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;
}
27/05/15 © P C F de Oliveira 2015 39
dotted
dashed
solid
double
groove
ridge
inset
outset
none/hidden
inherit
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>
Continua no próximo slide…
<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>
27/05/15 © P C F de Oliveira 2015 41
Exemplo
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 42
Resultado
27/05/15 © P C F de Oliveira 2015 43
border-xxxx-width
Especificar espessura das bordas
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;
}
27/05/15 © P C F de Oliveira 2015 45
thin
medium
thick
comprimento
inherit
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>
Continua no próximo slide…
<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>
27/05/15 © P C F de Oliveira 2015 47
Exemplo
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 48
Resultado
27/05/15 © P C F de Oliveira 2015 49
border-xxxx-color
Especificar cor das bordas
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;
}
27/05/15 © P C F de Oliveira 2015 51
transparent
nome/valor RGB
inherit
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;
}
Continua no próximo slide…
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>
27/05/15 © P C F de Oliveira 2015 53
Exemplo
Continuação do slide anterior
<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 acrescentara propriedade "border-style" para configurar as bordas primeiro.</p></body></html>
27/05/15 © P C F de Oliveira 2015 54
Exemplo
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 55
Resultado
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
27/05/15 © P C F de Oliveira 2015 57
border-xxxx
Especificar aparênciapara ladosespecíficos
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
27/05/15 © P C F de Oliveira 2015 59
border
Especificar para todos
os lados das bordas
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
27/05/15 © P C F de Oliveira 2015 61
margin-xxxx
Especificar margem para lado específico
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
27/05/15 © P C F de Oliveira 2015 63
margin
Especificar para todos os lados
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
27/05/15 © P C F de Oliveira 2015 65
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></html>
27/05/15 © P C F de Oliveira 2015 66
Resultado
27/05/15 © P C F de Oliveira 2015 67
DicaAcrescentar uma margem ao elemento body adiciona espaçosentre 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;
} Continua no próximo slide…
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. Craselementum erat sed sapien molestie, nec pharetraleo pulvinar. Nunc euismod efficitur fermentum. Nam volutpat nulla at tempus finibus.</p>
27/05/15 © P C F de Oliveira 2015 69
Exemplo
Continuação do slide anterior
<p class="B">Lorem ipsum dolor sit amet, consecteturadipiscing elit. Cras felis sem, volutpat feugiategestas non, luctus ac felis. Cras elementum erat sedsapien molestie, nec pharetra leo pulvinar. Nunc euismodefficitur fermentum. Nam volutpat nulla at tempus finibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras felis sem, volutpat feugiat egestas non, luctus ac felis. Cras elementum erat sed sapienmolestie, nec pharetra leo pulvinar. Nunc euismodefficitur fermentum. Nam volutpat nulla at tempus finibus.</p></body></html>
27/05/15 © P C F de Oliveira 2015 70
Exemplo
Continuação do slide anterior
27/05/15 © P C F de Oliveira 2015 71
Resultado
27/05/15 © P C F de Oliveira 2015 72
Atenção
Margem superior e inferior de elementos vizinhos se contraem ou fundem (collapse)
27/05/15 © P C F de Oliveira 2015 73
Margens verticais adjacentes se “contraem"
4em