Caderno da semana 12

Lista 9
Questão 6:
a. "Árvore Genealógica":

e1
├─ e2
│ └─ e5
├─ e3
└─ e4

b. Valores em pixels:
● e1:
● Largura: 1920px
● Espessura da borda: 12px
● Margem: 24px
● e2:
● Tamanho de fonte: 24px
● Preenchimento: 42px
● Margem: 42px
● Largura: 1056px (55% de 1920px)
● e3:
● Tamanho de fonte: 48px (250% de 24px)
● Preenchimento: 26.4px (1.1em de 24px)
● Margem: 360px (150% de 24px)
● e4:
● Tamanho de fonte: 36px (1.5rem de 24px)
● Margem: 192px (33% de 576px)
● Espessura da borda: 24px (2em de 12px)
● e5:
● Tamanho de fonte: 30px (125% de 24px)
● Largura: 720px (37.5% de 1920px)
● Preenchimento: 12px (0.5em de 24px)
Questão 7:
a. "Árvore Genealógica":

e1
├─ e2
│ └─ e3
├─ e4
└─ e5

b. Valores em pixels:
● e1:
● Largura: 1800px
● Preenchimento: 32px (2rem de 16px)
● Margem: 24px
● e2:
● Tamanho de fonte: 12px (75% de 16px)
● Espessura da borda: 32px (2em de 16px)
● Margem: 1200px (75% de 1600px)
● Largura: 1600px (100em de 16px)
● e3:
● Largura: 1056px (66% de 1600px)
● Preenchimento: 40px (2.5em de 16px)
● e4:
● Largura: 640px (40% de 1600px)
● Preenchimento: 24px (75% de 32px)
● Espessura da borda: 8px (0.5rem de 16px)
 ● e5:
● Tamanho de fonte: 28px (1.75em de 16px)
● Largura: 560px (35em de 16px)
Questão 8:
a. "Árvore Genealógica":

e1
├─ e2
├─ e3
└─ e4
└─ e5

b. Valores em pixels:
● e1:
● Largura: 1800px
● Tamanho de fonte: 16px
● Espessura da borda: 8px
● e2:
● Largura: 2080px (130em de 16px)
● Tamanho de fonte: 12px (0.75em de 16px)
● Margem: 8px
● e3:
● Largura: 1620px (90% de 1800px)
● Tamanho de fonte: 20px (1.25rem de 16px)
● Preenchimento: 48px (0.3em de 16px)
● Espessura da borda: 1400px (175% de 800px)
● e4:
● Largura: 2160px (135em de 16px)
● Tamanho de fonte: 8px (0.5em de 16px)
● Preenchimento: 1200px (150% de 800px)
● e5:
● Largura: 640px (40em de 16px)
● Tamanho de fonte: 32px (200% de 16px)
● Margem: 24px
Questão 9:
a. p::first-letter {
color: blue;
text-decoration: underline;
font-weight: bold;
font-size: 2em;
font-family: sans-serif;
}
b. #container {
width: 80%;
max-width: 1400px;
padding: 0 2em;
margin: 0 auto; }

lista 10
Questão 3:
#destaque_central {
width: 834px;
height: 796px;
padding: 12px 5px 7px 8px;
border: 3px solid black;
border-width: 5px;
border-left-width: 2px;
padding-bottom: 14px; }
 ● Para box-sizing: content-box:
● Largura = 834px (width) + 2 * 5px (padding) + 2 * 3px (border) = 847px
● Altura = 796px (height) + 12px (padding) + 5px (padding-bottom) + 2 * 3px (border) = 819px
● Para box-sizing: border-box:
● Largura = 834px (width)
● Altura = 796px (height)

Questão 4:
#teste {
width: 315px;
height: 290px;
border-left-width: 20px;
padding: 3px 4px 5px 6px;
border-width: 5px;
padding-top: 2px;
}

● Para box-sizing: content-box:

● Largura = 315px (width) + 20px (border-left-width) + 4px (padding-left) + 6px (padding-right) + 2 * 5px
(border) = 355px
● Altura = 290px (height) + 3px (padding-top) + 5px (padding-bottom) + 2 * 5px (border) = 308px
● Para box-sizing: border-box:
● Largura = 315px (width)
● Altura = 290px (height)

Questão 5:
#box2 {
width: 312px;
height: 437px;
padding-bottom: 4px;
border-width: 3px 4px;
padding: 1px 4px;
border-right-width: 2px;
}

● Para box-sizing: content-box:

● Largura = 312px (width) + 2px (border-right-width) + 4px (padding-right) + 4px (padding-left) + 3px
(border-left) + 4px (border-right) = 329px
● Altura = 437px (height) + 1px (padding-top) + 4px (padding-bottom) + 3px (border-top) + 4px
(border-bottom) = 449px
● Para box-sizing: border-box:
● Largura = 312px (width)
● Altura = 437px (height)