Unidades de medidas
No CSS, as unidades de medida desempenham o papel de definir os tamanhos e distâncias em uma página web. Existem duas categorias principais de unidades: as unidades absolutas e as unidades relativas.
Unidades Absolutas
Pixels (px)
O pixel (px) é uma unidade de medida absoluta que representa um ponto em uma tela. É uma unidade fixa e não se altera com base no tamanho da tela ou das configurações do usuário.
.nav-bar {
width: 200px; /* Largura fixa da barra de navegação */
padding: 10px; /* Preenchimento fixo de 10 pixels */
}Unidades Relativas
Em (em)
A unidade em é relativa ao tamanho da fonte do elemento pai. Se o tamanho da fonte do elemento pai for 16 pixels, 1.5em será equivalente a
.pai {
font-size: 16px; /* Tamanho da fonte do elemento pai */
}
.filho {
font-size: 1.5em; /* Tamanho da fonte será 1.5 vezes o tamanho da fonte do pai */
margin-bottom: 0.5em; /* Espaçamento inferior será 0.5 vezes o tamanho da fonte do pai */
}Rem (rem)
Similar à unidade em, mas relativa ao tamanho da fonte do elemento raiz (normalmente o elemento <html>). Isso garante uma consistência nas medidas em toda a página.
html {
font-size: 18px; /* Tamanho da fonte do elemento raiz */
}
.elemento {
font-size: 1.5rem; /* Tamanho da fonte será 1.5 vezes o tamanho da fonte do elemento raiz */
margin-bottom: 0.5rem; /* Espaçamento inferior será 0.5 vezes o tamanho da fonte do elemento raiz */
}Porcentagem (%)
A unidade de porcentagem é relativa ao valor do elemento pai. Por exemplo, se um elemento pai tem uma largura de 200 pixels e um elemento filho tem width: 50%, ele terá 100 pixels de largura.
.container {
width: 200px;
}
.item {
width: 50%; /* Cada item terá metade da largura do container */
}Viewport Width (vw) e Viewport Height (vh)
Essas unidades são relativas à largura (vw) e à altura (vh) da viewport, representando uma porcentagem da largura ou altura total da tela.
.secao {
width: 80vw; /* A largura da seção será 80% da largura da viewport */
height: 60vh; /* A altura da seção será 60% da altura da viewport */
}