1. Unidade de comprimento em CSS
Em CSS, muitos valores usam comprimento como valor. Os atributos do modelo de caixa são alguns atributos de valor óbvios: largura, altura, margem, preenchimento e borda. Além disso , existem muitos atributos CSS cujos valores também são valores de comprimento, como deslocamento, tamanho da sombra da caixa ou tamanho da fonte, espaçamento, etc. Existem muitas unidades de comprimento em CSS . sobre unidades de comprimento e seus usos.
2. Uma breve introdução (quais são as unidades de comprimento :)
Existem dois tipos de unidades de comprimento em CSS: comprimento absoluto e comprimento relativo .
Comprimento absoluto: px, pol, cm, mm, pt, pc;
Comprimento relativo: em, rem, ex, vh, vw, vmin, vmax, %, fr.
3. Introdução detalhada
1. Unidade absoluta de comprimento
A unidade de comprimento absoluto representa um tamanho físico real. Seu tamanho é fixo e não mudará devido a alterações no tamanho de outros elementos. A tabela a seguir lista as unidades de comprimento absoluto suportadas em CSS.
px: representa pixels. Os pixels são relativos à resolução da tela. A página é exibida em pixels precisos e não será alterada devido a alterações no tamanho de outros elementos. Os pixels ainda são a unidade de medida mais típica, por exemplo: para janelas A resolução. usada por usuários de Mac é de 96 pixels/polegada, enquanto a resolução usada por usuários de Mac é geralmente de 72 pixels/polegada. , a unidade na linguagem JavaScript geral é o pixel usado.
div{largura:200px;}in: inch é um arquivo de medida física, mas no campo CSS, polegada é mapeada diretamente em pixels. (1 pol == 2,54 cm == 96px)
div{largura:2 pol.;}c m: Centímetro é uma unidade familiar e útil de medida física. Também é mapeado em pixels. (1cm == 37,8px)
div{largura:20cm;}mm: Milímetro é uma unidade física de medida de pequena ordem de grandeza. (1mm == 0,1cm == 3,78px)
div{largura:200 mm;}p t: Os pontos também são unidades físicas de comprimento. (1 ponto == 1/72 pol. == 96/72px)
div{largura:20pt;}pc: Pica é igual a pontos, exceto (1pc == 12pt).
div{largura:20pt;}Exemplo:
<!DOCTYPEhtml><html><head><title>Unidade de comprimento absoluto</title><style>.box{largura:4in;altura:4,5cm;borda:2mmsolidblack;tamanho da fonte:16px;}.pt{fonte {tamanho da fonte: 2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>Esta é uma fonte de 16px<pclass=pt>Esta é uma fonte de 2pt</p><pclass =pc>Esta é a fonte de 3pc</p></div></body></html>Os resultados apresentados são os seguintes:
2. Unidade de comprimento relativo
A unidade de comprimento relativo significa que esta unidade não possui um valor fixo. Seu valor é afetado por outros atributos do elemento (como o tamanho da janela do navegador e o tamanho do elemento pai. A unidade de comprimento relativo é muito adequada para responsivo). layout A tabela a seguir lista as unidades de comprimento relativas suportadas em CSS.
em: em é uma unidade relativa, relativa ao tamanho da fonte do texto no objeto atual. Se o tamanho da fonte na linha atual não tiver sido definido, ele será relativo ao tamanho da fonte padrão do navegador. Inicialmente, a medida da composição é baseada no tamanho da letra M maiúscula da fonte atual. Quando a família de fontes for alterada, seu tamanho não mudará, mas quando o tamanho da fonte for alterado, seu tamanho mudará. em herdará o tamanho da fonte do elemento pai. (Existem exemplos de em e rem abaixo)
Sem nenhuma regra CSS: (1em == 16px == 0,17in == 12pt == 1pc == 4,2mm == 0,42cm)
div{largura:40em;}re em: rem é uma unidade relativa como em, mas ao contrário de em, rem é sempre relativo ao elemento raiz (como: root{}), ao contrário de em, que usa o método em cascata para calcular o tamanho. Esta unidade relativa é mais simples de usar.
div{largura:40rem;}ex: Unidade de comprimento relativo, relativa à altura do caractere Tamanho da fonte padrão. Ao contrário de em, em não mudará quando a família de fontes for alterada, mas a unidade ex mudará porque o valor de uma unidade e essa fonte têm uma relação de restrição especial.
div{largura:40ex;}ch: A conotação de ch é semelhante à altura de ex em relação a x, exceto que ch é baseado na largura do caractere 0 em vez da altura do caractere x. 1ch é a largura do número 0. Quando a família da fonte muda, ch também muda.
div{largura:40ch;}vw: vw (largura do ponto de vista) é a unidade de largura visual (largura da janela). de vw se aplicam a todos os elementos. O mesmo, independentemente de seu elemento pai ou da largura do elemento pai, um pouco como as unidades rem são sempre relativas ao elemento raiz. (Existem exemplos de vh e vw abaixo)
div{largura:40vw;}vh: As unidades de vh (altura da janela de visualização) e vw (largura da janela de visualização) são iguais. O vh diferente é relativo à altura da área visual (altura da janela).
div{largura:40vh;}vmin: O valor de vmin é o menor valor entre os atuais vw e vh. No exemplo de uso do tipo de tamanho padrão, em comparação com as unidades vw e vh que determinam o tamanho da tela por conta própria, vmin é uma métrica mais útil.
div{largura:40vmin;}vmax: O valor de vmax é o maior valor entre vw e vh.
div{largura:40vmáx;}%: Porcentagem, o valor do comprimento em porcentagem é baseado no valor do comprimento do elemento pai com o mesmo atributo. Por exemplo: se a largura de um elemento for 450px e a largura do elemento filho estiver definida como 50%, então o. o elemento filho é renderizado. A largura é 225px. (Se nenhum valor específico for definido para todos os elementos pais, definir a altura percentual fará com que o valor de todos os elementos seja 0).
div{largura:40%;}fr: Uma unidade de comprimento usada no layout de grade, geralmente usamos fr para cálculo.
A instrução a seguir declara uma grade com três linhas. A altura da primeira linha é 30px, a altura da segunda linha também é 30px e a altura da terceira linha é 60px.
linhas do modelo de grade:30px1fr2fr;
Exemplo:
<!DOCTYPEhtml><html><head><title>Unidade de comprimento relativo</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- size:2em;}.ex>span{font-size:3ex;}.ch>span{fon t-size:4ch;}</style></head><body><divclass=box>Esta é uma fonte de 16px<pclass=info>Esta é uma fonte de 2em</p><pclass=ex>x:< span>Esta é a fonte de 3ex</span></p><pclass=ch>0: <span>Esta é a fonte de 4ch</span></p></div></body></ HTML>Mostrado abaixo:
3. Resumo das unidades de comprimento:
(1) Antes de mais nada, precisamos entender uma coisa, ou seja, qual é exatamente a resolução da tela. Sabemos que em diferentes resoluções o tamanho dos pixels é diferente, portanto a mesma página web, em px? Quando usados como unidades de comprimento, os tamanhos exibidos são diferentes em resoluções diferentes. Em resoluções baixas, os pixels são maiores e os detalhes não são suficientemente claros. Embora a página exibida também seja grande, ela fica desfocada.
(2) Na verdade, todas as unidades, sejam elas relativas ou absolutas, (quando exibidas na tela) são eventualmente convertidas em unidades px, então de modo geral, ao fazer páginas web, a unidade básica Escolha px em vez de pt, porque pt é também convertido para px para exibição através do DPI do navegador (por exemplo, o DPI do FireFox é 96, então 9pt = 12px). Não apenas pt, cm, pol, mm e outras unidades também são convertidas em px, portanto, seja absoluto ou relativo, ele mudará em resoluções diferentes. Não pense que se o comprimento for definido como 3 cm, ele mudará em diferentes resoluções. resoluções diferentes A resolução permanece inalterada em 3cm.
(3) Acho que pt ainda é uma unidade muito útil, especialmente ao imprimir. Agora, algumas páginas da web foram implementadas para exibir uma página e imprimir de outra maneira. Pois bem, porque para diferentes resoluções as páginas impressas são todas do mesmo tamanho Esta é a primeira característica da unidade absoluta, mas ainda é preciso lembrar que no display esta unidade não representa o comprimento físico real, também. precisa ser ajustado de acordo com o tamanho real do pixel (isso está relacionado à resolução).
(4) Na verdade, podemos entender desta forma, considerar px como uma unidade absoluta (unidade absoluta no display), e outras unidades são baseadas nele, como em, que é a altura relativa à fonte do texto atual ( Suponha que o tamanho da fonte do texto atual seja 12px e definimos a nova fonte para 1,5em, então o novo tamanho da fonte é convertido para 12 * 1,5 = 18px), o que você precisa lembrar é que em é a altura relativa ao elemento pai. Suponha que definimos a fonte para 12px no primeiro div, 1,5em no segundo nível e 1,5em no terceiro nível. A exibição da fonte é: primeiro nível 12px, segundo nível 18px, terceiro nível 18 * 1,5 = 27px.