Unidades de comprimento em CSS
No CSS, as unidades de comprimento são usadas para definir a dimensão de um elemento HTML. Essas unidades podem ter valores fixos, bem como valores dinâmicos para uma interface responsiva. Devido a isso, eles são categorizados em duas classes absoluto e relativo. O absoluto a classe contém as unidades que oferecem valores fixos, enquanto o relativo A classe possui unidades que mudam seus valores de acordo com o elemento pai ou raiz.
As unidades de comprimento são usadas principalmente para definir a largura, altura, preenchimento, margem, borda, tamanho de fonte e muito mais. Tendo em vista a importância, este guia fornece uma visão geral das unidades de comprimento no CSS com os seguintes resultados de aprendizado.
- Lista de unidades de comprimento na classe absoluta
- Lista de unidades de comprimento em classe relativa
- Uso de unidades de comprimento absoluto e unidades de comprimento relativo
Unidades de comprimento CSS
Esta seção pede as unidades de comprimento em sua respectiva categoria. As unidades de comprimento são amplamente categorizadas em duas categorias, Absoluto e relativo. Vamos explorar as unidades que se enquadram nessas categorias e seu uso.
Como usar unidades de comprimento absoluto
Esta categoria contém as unidades de comprimento que têm valor fixo em todo o documento. Em situações em que o tamanho fixo de um elemento é necessário, essas unidades servem melhor ao propósito. No entanto, as unidades de comprimento absoluto não são adequadas para projetos responsivos. A tabela a seguir fornece a lista e a descrição das unidades de comprimento absoluto.
| Unidade | Símbolo | Relação |
|---|---|---|
| Polegada | em | 1in = 1in ou 1in = 96px |
| Centímetro | cm | 1in = 2.5cm ou 1cm = 38px |
| Milímetro | milímetros | 1in = 25mm ou 1mm = 3.84px |
| Picas | PC | 1in = 6pc ou 1pc = 16px |
| Pontos | pt | 1in = 72pt ou 1pt = 1.13px |
| Píxeis | px | 1in = 96px ou 1px = 1px |
Na tabela acima, a maior unidade é “Polegadas (in)” enquanto a menor unidade é “Pixels (PX)”. Entre estes, o px A unidade é praticada mais.
Exemplo: Usando unidades de comprimento absoluto
O código a seguir mostra o uso de unidades em, px, pt e mm de comprimento.
Html
Largura e altura em pixels (px)
Largura e altura em pontos (pt)
Largura e altura em milímetro (mm)
No código acima, três parágrafos estão fechados em um elemento único (serve como um elemento pai)
CSS
Do CSS acima, a largura e a altura da div, elemento está em polegadas que px, pt e mm são usados como unidades de comprimento em parágrafos.
Saída
A partir da saída, observa -se que os elementos filhos (parágrafos) não são influenciados pelo elemento pai ().
Como usar unidades de comprimento relativo
As unidades de comprimento relativo manipulam dinamicamente o tamanho do elemento em relação aos pais ou elemento raiz. A lista a seguir refere -se às unidades de comprimento relativo do CSS.
| Unidade | Símbolo | Descrição |
|---|---|---|
| Percentagem | % | A porcentagem relativa do elemento pai |
| Efêmero | Em | Refere-se ao tamanho da fonte do elemento pai |
| Raiz efêmero | rem | Refere-se ao tamanho da fonte do elemento raiz |
| Largura da viewport | vw | Em relação à largura do navegador-janela |
| Altura da viewport | vh | Em relação à altura do navegador |
| Personagem | CH | Em relação à largura do personagem "0" |
| Ex unidade | ex | Em relação à altura de "X (baixo caso)" |
| Viewport é mínimo | vmin | O VMIN refere-se à altura ou largura mínima da janela do navegador |
| Máximo da Viewport | vmax | O Vmax está relacionado com a altura/largura máxima do navegador |
Observação: Caso se não houver elemento pai, as unidades serão ajustadas de acordo com o elemento raiz ().
Exemplo: Usando unidades de comprimento relativo
Este exemplo fornece o uso de várias unidades de comprimento relativo.
Html
Largura e altura em porcentagem de acordo com o elemento pai
Largura e altura em EM (de acordo com o pai)
Largura e altura em Rem (de acordo com a raiz)
No código acima, três parágrafos são criados e estão contidos em um elemento pai (div). Esses parágrafos usam várias unidades de comprimento relativo (porcentagem, em e rem) para definir a largura e a altura.
CSS
No código CSS acima, a largura, a altura, a cor de fundo e a borda do elemento pai é definida. O .por , .Em, e .As classes Rem definem a altura/largura nas porcentagens (%), efêmera (EM) e efêmera de raiz (REM).
Observação: Como o tamanho da fonte padrão da div é de 16px, portanto 1em = 16px e 1Rem = 16px. O rem define o tamanho de acordo com o elemento raiz (corpo), enquanto o Em definiria o valor de acordo com o elemento pai (div).
Saída
Da saída, observa -se que o porcentagem e unidades EM Ajuste a largura/altura de acordo com o elemento pai (div), enquanto o rem A unidade define a largura/altura em relação ao elemento raiz (corpo).
Conclusão
No CSS, as unidades de comprimento são categorizadas em duas categorias mais amplas: unidades de comprimento absoluto e unidades de comprimento relativo. As unidades de comprimento absoluto têm valores fixos, enquanto as unidades relativas mudam seus valores de acordo com o pai ou o elemento dos pais ou raiz. As unidades de comprimento absoluto são PX, PT, PC, IN, CM e MM e as unidades %, em, REM, VW, VHM VMIN, Vmax, e ex cair sob unidades relativas. Para uma melhor compreensão, demonstramos o uso dessas unidades com a ajuda de exemplos.