Box model (HTML)

Prévia do material em texto

Estrutura básica do HTML5 1
Estrutura básica do HTML5
Tags
Sumário
1. Padding, border e margin - box model
O “padding” é a propriedade do CSS que edita o espaçamento entre o conteúdo e a 
borda do conteúdo. Segue exemplo:
Aqui vemos um padding de 0px, ou seja, não existe espaçamento entre o conteúdo 
e a border
1. Padding, border e margin - box model
2. Id, class, pseudo-classes e pseudo-elemento
2.1 Id
2.2 Class
2.3 Pseudo-classes
2.4 Pseudo-elemento
3. Posicionamento - propriedade Display
3.1 Display block
3.2 Display inline
3.3 Display inline-block
3.4 Display none
4. Flexbox
4.1 Flex-direction
4.2 Flex-wrap
4.3 Justify-content
4.4 Align-items
4.5 Align-content
Estrutura básica do HTML5 2
Aqui vemos um padding de 20px em todas as direções, assim, o conteúdo tem, em 
todas direções, um espaçamento de 20px da border
Estrutura básica do HTML5 3
A propriedade “padding” pode ser dividida em 4 subpropriedade, são elas: 
Estrutura básica do HTML5 4
padding-top: adiciona espaçamento apenas na parte superior
Estrutura básica do HTML5 5
padding-bottom:adiciona espaçamento apenas na parte inferior
Estrutura básica do HTML5 6
padding-left:adiciona espaçamento apenas na parte esquerda
Estrutura básica do HTML5 7
De forma análoga, as propriedade “margin” e “border” funcionam da mesma 
forma e se dividem nas mesmas 4 subpropriedades. Vejamos:
padding-rigth:adiciona espaçamento apenas na parte direita
Estrutura básica do HTML5 8
Podemos analizar essas propriedades na foto abaixo
Estrutura básica do HTML5 9
Para centralizar objetos usa-se margin: auto;
2. Id, class, pseudo-classes e pseudo-
elemento
2.1 Id
O id(se pronuncia “aidi”) serve para identificar uma tag de forma individual/especial no 
CSS, para que as outras tags que forem iguais ao que vc quer editar não sofra a 
mesma modificação, pois se vc chamar simplismente pelo h1 no seu CSS, todos os 
h1’s sofrerão a mesma modificação. Exemplo:
No seu HTML vc tem duas tags h1 e vc só quer modificar o background-color do 
primeiro h1, então para que o seu CSS entenda isso, vc criar um id no seu primeiro 
Estrutura básica do HTML5 10
h1, assim, a modificação entrará apenas no seu primeiro h1. Para chamar um id no 
CSS usa-se “#” acompanhado do nome do id (nomes sem acentuação).
<h1 id="principal">Criando site</h1> 
 
<h1>Aprendendo HTML</h1>
#principal{ 
 background-color: red; 
}
Mas lembrando, o mesmo id só pode ser usado apenas em uma tag por vez, caso vc 
quereira criar outro id em outra tag, deve colocar outro nome.
2.2 Class
O class, serve para a mesma coisa que o id: modificar configurações de um elemento, 
mas, diferente do id, serve para modificar mais de um elemento de uma vez. Para 
chamar uma class no CSS, usa-se “.” acompanhado pelo nome da class. Exemplo:
<h1 class="titulo">Aprendendo HTML</h1> 
<h2 class="basico">HTML básico</h2> 
<h2 class="intermediario">HTML intermediário</h2> 
<h2 class="avancado">HTML avançado</h2> 
 
<h1 class="titulo">Aprendendo CSS</h1> 
<h2 class="basico">CSS básico</h2> 
<h2 class="intermediario">CSS intermediário</h2> 
<h2 class="avancado">CSS avançado</h2>
.titulo{ 
 background-color: red; 
} 
 
.basico{ 
 background-color: green; 
} 
 
.intermediario{ 
Estrutura básica do HTML5 11
 background-color: blue; 
} 
 
.avancado{ 
 background-color: pink; 
}
2.3 Pseudo-classes
As pseudo-classes refere-se a como um elemento vai se comportar em um 
determinado estado, por exemplo: quando eu passar o mouse por cima desse 
elemento o que eu quero que seja alterado momentaneamente? E quando eu clicar no 
botão?
Para fazer isso, chamamos o elemento qualquer no CSS e aplicamos “:” para aplicar 
uma pseudo-class.
:hover
hover que muda a caracterisca de um elemento ao passar o mouse por cima. No 
exemplo abaixo, a div terá um background de cor amarela apenas quando o mouse 
estiver sobre ela.
<div id="d1">01</div>
div:hover{ 
 background-color: yellow; 
}
:active
Quando clicamos em um botão, ele se tona ativo, podemos mudar seu estilo, mas 
quando desativarmos, esse estilo retonará ao que era antes.
Estrutura básica do HTML5 12
:disabled
Quando o elemento estiver desabilitado o estilo será aplicado. Seria bom aplicado 
em checkbox
:empty
Caso o elemento não tiver conteúdo dentro = vazio, o estilo será aplicado
:first-of-type
Aplica o estilo no primeiro elemento do container
exemplo:
.container p:first-of-type{estilo}
O estilo será aplicado apenas ao primeiro parágrafo do container
:last-of-type
a mesma coisa do :first-of-type, mas aplicado ao último elemento do container
:focus
Quando clicar em um input para digitar, o estilo será aplicado.
:not()
Quando tivermos vários elementos iguais e com o mesmo estilo e não queremos 
aplicar esse estilo em um elemento específico, add uma class nele e usamos o not 
para esse estilo nçao ser apicado. Exemplo:
O .new só será aplicado no elemento que eu não quero que receba esse estilo.
.div:not(.new){ estilo }
Estrutura básica do HTML5 13
:checked
aplica um estilo quando o checkbox estiver selecionado
2.4 Pseudo-elemento
A função pseudo-elemento serve para inserir algo que não existe de fato - por isso 
pseudo - no seu site. Para inserir um pseudo-elemento no CSS, usa-se o nome do 
elemento/tag acompanhado por “::”.
::first-line
Aplica estilo apenas na primeira linha do parágrafo
::first-letter
Aplica estilo apenas na primeira letra do parágrafo
::selection
Aplica estilo quando selecionamos uma texto para copiar
::marker
Estiliza os marcadores das listas <li>. Podemos usar o content:”” para mudar o tipo 
de marcador.
::placeholder
Estilo o texto que fica dentro dos input’s
::before e ::after
Cria elementos sem precisar alterar a estrutura do html
Estrutura básica do HTML5 14
<a href="https://gustavoguanabara.github.io/">Repositório GitHub</a>
a::before{ 
 content: "Click"; 
 color: darkgray; 
}
Dessa forma, após o elemento “a”, que é o link, aparecerá um pseudo-elemento 
com o nome “click” de cor cinza.
Recapitulando: 
No HTML No CSS
id #
class .
pseudo-class :
pseudo-elemento ::
3. Posicionamento - propriedade Display
Uma das propriedades básicas de cada elemento HTML é seu display. Por padrão, 
elementos como div, section, p, h1, ul, li, article são display block e elementos como a, 
span, b, i são display inline.
Estrutura básica do HTML5 15
3.1 Display block
A declaração display: block faz com que o elemento HTML seja renderizado como 
bloco, tal como os parágrafos e os cabeçalhos o são. Um bloco não permite outros 
elementos ao lado e por padrão ocupa todo o width dispoível da tela.
3.2 Display inline
A propriedade display: inline faz com que o elemento HTML  
seja renderizado inline, na mesma linha e permite que outros elementos inline fiquem 
ao seu lado. Se adapta ao conteúdo, as propriedades width e height não funcionam.
3.3 Display inline-block
Um bloco inline é colocado inline (ou seja, na mesma linha do conteúdo adjacente), 
mas comporta-se como se fosse um bloco. 
Na prática usamos o valor inline-block quando queremos definir um valor para a 
propriedade width. Sob certas circunstâncias, alguns navegadores ignoram a 
propriedade width para elementos inline, então definindo display: inline-block para tais 
elementos você forçará o navegador a reconhecer o valor definido para a 
propriedade width. Assim, teremos blocos um ao lado do outro.
Estrutura básica do HTML5 16
3.4 Display none
A declaração display: none faz com que o elemento HTML  
não seja renderizado, não irá aparecer na tela.
4. Flexbox
Para usar as propriedades do flexbox, primeiro devemos definir a propridade display 
como flex.
4.1 Flex-direction
A propriedade flex-direction define como os itens flexíveis são colocados no contêiner 
flexível, definindo a direção (normal ou invertido).
Assim, temos as seguinte configurações:
flex-direction: row;
flex-direction: row-reverse;
Estrutura básica do HTML5 17
flex-direction: column;
flex-direction: column-reverse;Estrutura básica do HTML5 18
4.2 Flex-wrap
A propriedade flex-wrap define se os itens flexíveis são forçados a ficarem na mesma 
linha ou se podem ser quebradas em varias linhas. Se o argumento for valido, ele 
define a direção em que as linhas são empilhadas.
Assim, temos as seguinte configurações:
flex-wrap: nowrap;
Os itens não irão quebrar de linha
Estrutura básica do HTML5 19
flex-wrap: wrap;
Os itens irão quebrar de linha quando não houver espaço para todos na mesma 
linha
flex-wrap: wrap-reverse;
Funciona da mesma forma que a propriedade anterior, só que de baixo para cima.
4.3 Justify-content
A propriedade justify-content define como o navegador distribui o espaço entre e ao 
redor dos itens de conteúdo ao longo do eixo principal de um contêiner flexível. 
Alinhamento horizontal.
Estrutura básica do HTML5 20
justify-content: flex-start;
Os itens são embalados alinhados uns com os outros em direção à borda do 
contêiner de alinhamento, dependendo do lado de partida principal do contêiner 
flexível. Isso se aplica apenas a itens de layout flexível.
justify-content: flex-end;
Os itens são embalados alinhados uns com os outros em direção à borda do 
contêiner de alinhamento, dependendo do lado da extremidade principal do 
contêiner flexível. Isso se aplica apenas a itens de layout flexível.
justify-content: center;
Estrutura básica do HTML5 21
Os itens são embalados alinhados uns com os outros em direção ao centro do 
contêiner de alinhamento ao longo do eixo principal.
justify-content: space-between;
Os itens são distribuídos uniformemente dentro do contêiner de alinhamento ao 
longo do eixo principal. O espaçamento entre cada par de itens adjacentes é o 
mesmo. O primeiro item está alinhado com a borda de início principal e o último 
item está alinhado com a borda de extremidade principal.
justify-content: space-around;
Os itens são distribuídos uniformemente dentro do contêiner de alinhamento ao 
longo do eixo principal. O espaçamento entre cada par de itens adjacentes é o 
mesmo. O espaço vazio antes do primeiro e depois do último item é igual a metade 
do espaço entre cada par de itens adjacentes.
justify-content: space-evenly;
Estrutura básica do HTML5 22
Os itens são distribuídos uniformemente dentro do contêiner de alinhamento ao 
longo do eixo principal. O espaçamento entre cada par de itens adjacentes, a borda 
inicial principal e o primeiro item, e a borda final principal e o último item, são 
exatamente iguais.
4.4 Align-items
Alinhamento vertical eixo y
align-items: flex-start;
align-items: flex-end;
Estrutura básica do HTML5 23
align-items: center;
align-items: baseline;
Estrutura básica do HTML5 24
4.5 Align-content
Alinhamento vertical, para quando houver uma quebra
align-content: flex-start;
align-content: flex-end;
align-content: center;
Estrutura básica do HTML5 25
align-content: space-between;
align-content: space-around;
Estrutura básica do HTML5 26