Prévia do material em texto

2
AGENDA
DO
MÓDULO
{Box model e box types}
{Dimensões}
{Margin e padding}
{Fixed, absolute e z-index}
{Normal flow}
{Utilizando o float}
Agenda do módulo
Anotações
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
3
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
MISSÃO DO 
MÓDULO
Conhecer a estrutura box 
model e aplicar na prática os 
principais elementos de posição e 
dimensionamento. 
Os telefones celulares 
representam cerca de 53% do 
tempo que o MUNDO passa 
online. 
(Digital 2021 Global Overview Report).
Por isso é fundamental que os 
sites que você produz tenham 
uma boa visualização tanto 
no computador quanto nos 
diferentes dispositivos móveis. 
4
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
Box model e 
box types
{01.}
Quando o navegador renderiza o código de uma 
página WEB, ele coloca cada conteúdo dentro de 
um box retangular.
Chamamos o módulo do CSS que diz como os 
elementos devem ser renderizados de Box Model. 
E essa caixa que é criada ao redor do conteúdo tem 
4 componentes. 
Box model
Se você acha matemática difícil, 
você não experimentou o web 
design.
Trish Parr
Como é que você consegue ser assertivo com o 
tamanho que cada elemento vai ocupar na página 
sem exceder o tamanho total dela?
Usando a propriedade “box-sizing".
Quando usada com o valor "border-box", o Box 
Model passa a incluir os valores do padding e 
do border dentro do tamanho declarado para o 
conteúdo.
Box-sizing e border-box
PULO DO
GATO
 > Use * {box-sizing: border-box;} para 
tornar padrão o border-box.
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
6
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
6
Lembra dos dois tipos de elementos HTML, do 
tipo bloco e do tipo inline?
Para o tipo de layout que encontramos nos 
sites atuais, só dois elementos não eram mais o 
suficiente.
O CSS criou 20 tipos de elementos, chamados de 
box type.
Para isso é usada a propriedade display. 
Os 6 elementos mais comuns são:
 > none
 > inline
 > block
 > inline-block
 > inline-table
 > table 
Pra nada ficar 
de fora, size e 
position 
importam. 
7
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
MÃO 
NA MASSA
Resolva nosso Tetris Box Model! 
 > Edite o CSS do template que disponibilizamos 
para alcançar o resultado ao lado. 
 > Você só vai precisar incluir duas propriedades.
Dimensões
{02.}
Vamos conhecer as diferentes formas de definir o 
tamanho de um elemento HTML via CSS?
8
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
auto: 
valor padrão no qual o navegador calcula o tamanho da dimensão. 
length: 
explicita um comprimento de acordo com as unidades de medida do CSS. 
porcentagem: 
define o tamanho da dimensão como uma porcentagem do bloco pai.
initial: 
volta o valor da dimensão para o estado inicial.
inherit: 
herdará a dimensão do componente pai. 
calc: 
realiza uma conta para determinar a dimensão do componente. 
PULO DO
GATO
 > Não use cm, pt e in.
MÃO 
NA MASSA
Disponibilizamos um template similar ao do mão na massa da aula 
passada. 
Novo desafio: ajustar as dimensões bloco a bloco de maneira a preencher 
completamente o container amarelo. 
9
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
Todos os valores que podem ser 
utilizados pelo height podem ser 
utilizados pelo width também.
Margin e padding
{03.}
Margin
Representa a camada mais externa do box model. 
Na hora de definirmos as margens de um elemento 
no CSS, não dependemos apenas da propriedade 
margin. 
Podemos utilizar outras quatro, que são variações da 
primeira:
 > margin-top
 > margin-right
 > margin-bottom
 > margin-left
PULO DO
GATO
 > Use margens com o propósito de 
organizar informações e não para 
consertar erros de layout.
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
11
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
Padding
Propriedade que adiciona espaço dentro de um 
conteúdo.
Esse tipo de espaçamento tem o objetivo de 
melhorar a legibilidade do texto e criar uma 
sensação de leveza.
Assim como na margin, também podemos mudar o 
padding em apenas uma direção. 
Para isso, basta utilizar as seguintes propriedades:
 > padding-top
 > padding-right
 > padding-bottom
 > padding-left
PULO DO
GATO
 > Os tipos de valores que passamos 
para as propriedades de margin e 
padding são iguais aos valores que 
passamos para a altura e largura.
MÃO 
NA MASSA
Adicione um espaçamento interno na de classe “card-wrapper” 
de 32px em todas as direções. Você pode usar espaçamento interno e 
externo para isso.
Seu card deve ficar igual ao da imagem:
O espaço em branco é como 
o ar: é necessário para que o 
design respire.
Wojciech Zieliński
12
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
13
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
Normal flow
{04.}
A propriedade position, traduzida do inglês como 
posição, é utilizada para determinar o modo de 
posicionamento de um elemento em uma página 
web. 
Normalmente é acompanhada de outras 
propriedades, que auxiliam nesse processo de 
definição da posição: 
 > top
 > right
 > bottom
 > left
Também, existem alguns valores que podemos 
passar para essa propriedade, como:
01. static = estático: 
permite o posicionamento do elemento de 
acordo com o fluxo normal da página, porém sem 
deslocamentos.
02. relative = relativo: 
o elemento se posiciona de acordo com o fluxo 
normal da página, porém permite o deslocamento.
MÃO 
NA MASSA
Coloque dois quadrados dentro da com classe 
“boxes”, sendo eles com classes “green” e 
“blue”, respectivamente. Eles devem ficar na vertical, 
e você deve utilizar a posição estática.
14
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
03. sticky = adesivo: 
o elemento se posiciona de formas diferentes com 
base no scroll (barra de rolagem) do usuário.
Fixed, absolute 
e z-index
{05.}
Vamos ainda mais a fundo nos conhecimentos sobre 
os elementos de posição e dimensionamento?
absolute = absoluto: 
o elemento é retirado do fluxo normal da página, 
tornando-o absoluto dentro de um elemento pai. 
fixed = fixo: 
o elemento é retirado do fluxo normal da página, 
tornando-o fixo na tela.
PULO DO
GATO
 > Existe uma diferença quando se fala da 
comparação do fixed com o absolute.
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
MÃO 
NA MASSA
Utilizando posicionamento absoluto:
 > O quadrado verde deve ficar no canto inferior 
esquerdo.
 > O quadrado azul deve ficar no canto superior 
direito.
16
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
O posicionamento do tipo fixed será realizado em 
relação à tela, enquanto o posicionamento absolute 
é relativo ao seu container.
z-index = índice da terceira 
dimensão
Define uma ordem na dimensão z de um elemento 
posicionado, sobrepondo aqueles elementos 
que possuem um z-index maior por aqueles que 
possuem um menor.
17
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
O z-index não altera a estrutura do 
documento ou da página, também 
não mexe no fluxo de exibição. 
Sua única função é aplicar um efeito 
visual.
17
Pra nada ficar 
de fora, size e 
position 
importam. 
18
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
Utilizando o float
{06.}
MÃO 
NA MASSA
Utilizando z-index:
 > O quadrado azul deve ficar em cima dos 
quadrados verde e vermelho.
 > O quadrado amarelo deve ficar em cima 
do quadrado verde e abaixo do quadrado 
vermelho.
float = flutuante: 
força o posicionamento deum elemento para a 
esquerda ou para a direita do seu container.
A propriedade pode assumir os seguintes valores:
left: 
o elemento é alinhado no lado esquerdo do 
seu container.
right: 
o elemento é alinhado ao lado direito do seu 
container.
none: 
o elemento não possui float.
Existem dois valores que são experimentais e 
apenas alguns navegadores suportam.
São eles: 
 
inline-start: 
o elemento é alinhado no lado do começo do bloco. 
PULO DO
GATO
 > Para o inline-start, o idioma importa. 
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
inline-end: 
o elemento é alinhado no lado do fim do bloco. 
Aqui o idioma também importa! 
Atualmente o float está em desuso, pois existem 
recursos mais modernos que garantem uma maior 
eficiência no gerenciamento de layout, como o 
display flex.
20
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
MÃO 
NA MASSA
 > Utilizando o posicionamento do tipo 
float, faça com que os quadrados fiquem 
alinhados à direita, um ao lado do outro.
21
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
DESAFIO
CONQUER
 > Suponha que um artista achou 
seu contato via LinkedIn. 
 > Ele quer contratar você para 
fazer suas artes de forma 
virtual.
 > Use o que você aprendeu 
neste módulo para fazer esse 
trabalho. 
if (challenge)
 // start
22
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
QUERO MAIS
if (interested)
 // gimmemore
Espaço branco no design 
Nick Babich
Desafio 100 dias de 
CSS
valores inline-start 
e inline-end
 
https://xd.adobe.com/ideas/principles/web-design/what-is-white-space-in-design/
https://xd.adobe.com/ideas/principles/web-design/what-is-white-space-in-design/
https://100dayscss.com/days/1/
https://caniuse.com/mdn-css_properties_float_flow_relative_values
23
H
TM
L 
e 
C
SS
: 
D
im
en
sõ
es
 e
 p
os
ic
io
na
m
en
to
23
Anotações
	{01.} Box model e box types
	{03.} Margin e padding
	{04.} Normal flow
	{05.} Fixed, absolute e z-index
	{06.} Utilizando o float
	Agenda do módulo
	{02.} Dimensões
	Anotações
	Botão 14: 
	Botão 15: 
	Botão 24: 
	Botão 25: 
	Botão 9: 
	Botão 10: 
	Botão 11: 
	Botão 21: 
	Botão 12: 
	Botão 22: 
	Botão 17: 
	Botão 18: 
	Botão 19: 
	Botão 20: 
	Botão 6: 
	Page 3: 
	Page 4: 
	Page 6: 
	Page 7: 
	Page 8: 
	Page 9: 
	Page 11: 
	Page 12: 
	Page 13: 
	Page 14: 
	Page 16: 
	Page 17: 
	Page 18: 
	Page 20: 
	Page 21: 
	Page 22: 
	Page 23: 
	Botão 5: 
	Page 3: 
	Page 4: 
	Page 6: 
	Page 7: 
	Page 8: 
	Page 9: 
	Page 11: 
	Page 12: 
	Page 13: 
	Page 14: 
	Page 16: 
	Page 17: 
	Page 18: 
	Page 20: 
	Page 21: 
	Page 22: 
	Page 23: 
	Botão 13: 
	Botão 16: 
	Botão 23: 
	Botão 26: 
	Botão 27: 
	Botão 28: 
	Botão 29: 
	Botão 30: 
	Text Field 127: