Aula 10 box Model - WordPress.com · Aula 10 box Model Prof. Paulo Cesar F. De Oliveira, BSc, PhD...

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>


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


<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>


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>


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 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


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 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


<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


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


<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>

27/05/15 © P C F de Oliveira 2015 41

Exemplo


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


<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>

27/05/15 © P C F de Oliveira 2015 47

Exemplo


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 52

Exemplo


<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>

27/05/15 © P C F de Oliveira 2015 53

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 acrescentara 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 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 65

Exemplo


<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 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


<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


<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


27/05/15 © P C F de Oliveira 2015 72

Atenção

Margem superior e inferior de elementos vizinhos se contraem ou fundem (collapse)

Aula 10 box Model - WordPress.com · Aula 10 box Model Prof. Paulo Cesar F. De Oliveira, BSc, PhD...

Documents

Transcript of Aula 10 box Model - WordPress.com · Aula 10 box Model Prof. Paulo Cesar F. De Oliveira, BSc, PhD...