O que são porcentagens em CSS?
Porcentagens em CSS são valores relativos cujo tamanho de referência é definido separadamente para cada propriedade. Uma porcentagem pode ser resolvida com base em um bloco de contenção, no tamanho da fonte ou em outra dimensão calculada.
Como funcionam as porcentagens em CSS
Um token de porcentagem não tem um significado universal em pixels; a gramática da propriedade determina tanto se ele é permitido quanto qual grandeza fornece sua base. A resolução pode ocorrer durante o cálculo do valor calculado ou do valor usado, e uma dimensão de contenção indefinida pode fazer algumas porcentagens se comportarem de modo semelhante a auto. Porcentagens também podem participar de funções como calc() e ser combinadas com comprimentos quando a gramática permite. Elas são fundamentais para layouts fluidos, transformações, planos de fundo, tipografia e posicionamento.
Informações essenciais
- Para width, uma porcentagem normalmente se refere à largura do bloco de contenção, enquanto valores percentuais de translate() se referem à caixa de referência do próprio elemento transformado.
- Os espaçamentos internos superior e inferior em porcentagem se baseiam no tamanho do bloco de contenção no eixo inline nos modos comuns de escrita horizontal, o que costuma surpreender quem implementa técnicas de proporção.
- Uma altura em porcentagem precisa de uma altura resolvível para o bloco de contenção em muitos contextos de layout; caso contrário, ela pode se comportar como auto, portanto
height: 100%não preenche necessariamente o espaço livre.
Quando as porcentagens em CSS são importantes
Use porcentagens quando um elemento deve acompanhar sua dimensão de referência relevante em vez de permanecer fixo. Confirme a base percentual da propriedade, pois o mesmo valor pode ser resolvido de maneiras diferentes em largura, altura e transformações.