Achei o assunto bem confuso. Não compreendi bem sobre a %, CH, REM, e EM. Como podem me ajudar, por favor?
insira seu código aqui
Achei o assunto bem confuso. Não compreendi bem sobre a %, CH, REM, e EM. Como podem me ajudar, por favor?
insira seu código aqui
Observe os seguintes códigos :
Código HTML:
<div>
<div><p>Propriedades</p></div>
<p>Testando</p>
</div>Código CSS:
div
{
width: 500px;
height: 500px;
background-color: red;
font-size: 40px;
text-align: center;
color: #000;
}
div div
{
display: inline-block;
font-size: 2em;
color: yellow;
background-color: green;
width: 3.2ch;
height: 50%;
line-height: 0.7em;
}Eles produzirão:
Propriedades
Testando
-------------------------------------------------------------------------------------------------------
Porcentagem:
Observe as medidas ligadas à div verde. Primeiramente, eu coloquei sua altura como 50% (height: 50%), mas dá onde será que o CSS se baseou para tirar esses 50%? Pela proporção da figura é fácil notar que a altura da div verde é na verdade 50% da altura da div vermelha. Geralmente, ao utilizar a porcentagem numa certa propriedade, o CSS se baseia nessa mesma propriedade só que de outra tag que chamamos de tag pai. A tag pai é a primeira tag externa. É a tag que engloba a tag atual. No exemplo de código HTML que criei, a tag p com a palavra "Propriedades" tem como tag pai a segunda div. Já a tag p com a palavra "Testando" tem como tag pai a primeira div.
-------------------------------------------------------------------------------------------------------
Unidade em: (emphemeral unit)
Ainda na segunda div, o natural seria que o seu texto tivesse o mesmo tamanho do texto da primeira div (40px), porém, ao usar o font-size: 2em, estou dizendo ao CSS que eu quero que o tamanho da fonte na segunda div seja o dobro do que ela herdar de suas tags mais externas. (Observe que o texto amarelo tem o dobro da altura do texto preto, ou seja, 40px * 2)
-------------------------------------------------------------------------------------------------------
Unidade ch: (character)
Há uma certo padrão de letras por linha na div verde não é mesmo? Pois é, todas as linhas têm 3 letras. Mas como consegui isso? O que fiz foi especificar que a largura (width) da div verde deveria ser um pouquinho maior do que a largura de 3 caracteres da fonte usada na própria div verde. Conclusão, 1ch é aproximadamente a largura de um caractere da fonte que a tag estiver usando.
-------------------------------------------------------------------------------------------------------
Unidade rem: (root emphemeral unit):
Como o próprio nome sugere, a unidade rem é a unidade efêmera da raiz, que nesse caso, é a tag <html> ou então o próprio navegador. 1rem = tamanho da fonte da raiz.
-------------------------------------------------------------------------------------------------------
Obs.: voltando na porcentagem, imaginemos por exemplo o código font-size: 120%;. Além do código, vamos supor que a tag pai não tem um font-size definido. Nesse caso, o CSS irá buscar essa propriedade em tags cada vez mais externas (tag avô, bisavô, ...).