A especificação de tamanho e posição com css

Em uma definição de estilo CSS (ou regra

), Você pode descrever posições e tamanhos, em muitos aspectos, usando unidades diferentes podem de medição. Muitas vezes você pode escolher qualquer unidade desejada, embora certos tipos específicos de medidas funcionam melhor em determinadas situações.

Por exemplo, muitos designers que trabalham com papel e tinta são usados ​​para especificar fontes no pontos. Um ponto é um comprimento absoluto: 1/72 de uma polegada. Usando especificações de tamanho tipo absolutos para uma revista ou um livro funciona muito bem - afinal, o usuário não pode encolher, esticar, ou alterar a relação de uma página aspecto em um livro. (Proporção da tela é a razão entre altura e largura.) Os navegadores, no entanto, pode ser redimensionado à vontade. Se você arrastar um lado de um navegador, você está mudando, tornando-o mais fino ou mais gordo. Em outras palavras, o seu mudando sua forma, sua proporção, de, digamos, um quadrado a um retângulo.

Para fontes exibidas em um navegador, uma unidade relativa de medição é superior aos pontos tradicionais. Ao contrário das medidas absolutas tais como pontos ou polegadas, uma unidade relativa escalas com tamanhos de fonte. Como resultado, você obtém resultados mais previsíveis em páginas da Web com unidades relativas de medições especificando o tamanho do tipo. Uma unidade relativa útil de medições para um web designer é o em. Embora o em é útil, na prática, a maioria dos designers ainda usam pontos ou pixels ao especificar o tamanho do tipo. Talvez seja apenas força do hábito, mas em qualquer caso, os resultados costumam olhar bem na maioria dos navegadores.

comprimento de medição

Aqui estão eles em poucas palavras. . . todas as unidades que medem comprimento:

• px (pixels): Pixels são a menor unidade em uma tela - os pontos às vezes você pode ver se você chegar perto o suficiente para uma TV. Por exemplo, ajuste a resolução do monitor para 800 x 600 significa que é 800 pixels de largura por 600 pixels de altura.

Pixels pode ser uma maneira útil para especificar o tamanho da fonte, mas a desvantagem é que se você especificar pixels, que substitui a opção de tamanho de fonte personalizada no Internet Explorer - para que os usuários não podem ajustar a partir de “grande” para “maior” e assim por diante. No entanto, você deve sempre usar px para descrever imagem tamanhos. Imagens já mensuráveis ​​em pixels (você pode ver as medições por carregar a imagem em qualquer aplicação gráfica).

• pt (pontos): Um ponto é igual a 1/72 de polegada. Os pontos (e) são picas medidas carácter tipo clássico. A maioria dos navegadores padrão para um tipo de letra serif de 12 pontos.

• pc (paicas): Um pica equivale a 12 pontos.

• mm (milimetros): Um milímetros é .0394 polegadas, de modo que uma polegada contém cerca de 26 milímetros. Um centímetro contém 10 milímetros. Grande parte do mundo usa essa métrico sistema.

• cm (centímetros): Um centímetro é .3937 polegadas, de modo que uma polegada contém cerca de 2 1/2 centímetros.

• em polegadas): Polegadas são uma unidade no Inglês ou imperial sistema - utilizado nos Estados Unidos. Inglaterra e alguns remanescentes do período colonial também ficou com o sistema imperial por um longo tempo, mas cedeu recentemente. O governo britânico cumpriu em 2000 com o sistema métrico Europeia e é agora uma ofensa criminal para vender pela libra em qualquer lugar no reino de Sua Majestade. Um homem em Cornwall, por exemplo, teria tido de pagar custas judiciais depois de ser pego vendendo cavala em £ 1,50 por libra.

Uma polegada é baseado na distância entre a primeira articulação eo fim do polegar de um rei hoje esquecido. Por 50 anos, os esforços persistentes para educar e legislar fora do sistema imperial em favor da métrica falharam na U.S ..

• em: Em é uma unidade de medição derivada da largura aproximada da carta m de uma fonte. Este é considerado geralmente a melhor maneira de especificar o tamanho da fonte em CSS, embora alguns designers de seguir este conselho.

• ex (o-x altura): Ex é a altura x, ou a altura da letra minúscula X, da fonte do elemento atual.) Navegadores costumam dividir em pela metade, para obter o ex-altura. Esta unidade de medida não está neste momento tão útil quanto o em porque não é tão previsível uma média para todos os tipos de letra.

• % (Por cento): As percentagens são excelentes para a especificação de tamanho relativo (que pode ser em relação a um antepassado, o pai, e assim por diante).

As unidades de medida não são maiúsculas e minúsculas. Você pode aproveitar-los ou não, como você deseja. Da mesma forma, no IE, pode incluir um espaço entre o número e a sua unidade, ou não: Por exemplo, 2-in é equivalente a 2in. Outros navegadores não gosta do espaço. Para simplificar, usando letras minúsculas e evitando espaços desnecessários é geralmente uma boa idéia quando se trabalha com CSS. Apenas adquirir o hábito do formato 2in ou 24px e você vai ficar bem, a menos que as comissões CSS decidir inverter-se no futuro.

pouco em entendimento

Porque os especialistas recomendam que você usa em ao projetar uma página da Web que você quer olhar apenas para que, vale a pena dar uma olhada no que esta unidade realmente significa. Tradicionalmente, o Em era a largura da letra m.

Talvez você já tenha ouvido o termo m-traço ou em-traço, que é o traço normalmente empregada na publicação. É uma linha horizontal - como estes - o equivalente à largura da letra do tipo de letra m (Isto não é estritamente um equivalente preciso em muitos tipos de letra). Há também um en-dash. Adivinha o que ele é baseado em.

EM e ex unidades são relativo para cada tipo de letra. Isso é útil porque significa que o tamanho especificado por EM muda de forma precisa com base na resolução do usuário monitor, configurações de preferências, e outros fatores. Em outras palavras, usando em permite que você especifique o que acontece relativo para o tipo de letra. O resultado é proporcional às outras qualidades do tipo de letra e texto ao redor. Além disso, as especificações relativos como em permitir que as pessoas com desvantagens para ampliar a fonte no seu navegador, se necessário. Especificações fixos, como px ou pt não oferecem o usuário esta opção.

Em e ex são unidade de tipógrafo tradicional de medida, mas seus significados em CSS são ligeiramente modificada. Por um lado, os computadores calcular ex simplesmente dividindo em ao meio. Isto é mais fácil de calcular, mas apenas uma aproximação para a maioria dos tipos de letra. Em em CSS é o tamanho da fonte em pixels. Isso é útil porque você pode especificar em unidades e confiar neles sendo relativo ao pai (ou outro) da fonte do elemento.

Aqui está um experimento para obter a ideia de como é em relativo a um outro elemento. Neste código, o texto dentro do elemento é definido como 26px, mas o texto dentro do elemento de parágrafo é definido como 1.5em, ou, dito de outra forma, uma vez e meia o tamanho do pai. Mais tarde no código HTML, o elemento de parágrafo é fechado (parent) pelo elemento de corpo. Portanto, o texto do parágrafo é processado em 1,5 × 26 pixels (ou 39 pixels).

algum texto

algum texto (1,5 em do corpo pai).

algum texto (39 pixels).

O texto na versão classe abs de

é processado o mesmo tamanho que o normal

. o elemento é um elemento pai do

, e

é definido como 1.5em da sua mãe. O corpo pai usa 26 pixels como seu tamanho do texto, de modo que 26 × 1,5 resultados em 39 pixels.