ホームページ  >  記事  >  ウェブフロントエンド  >  CSS_html/css_WEB-ITnose のユニット

CSS_html/css_WEB-ITnose のユニット

WBOY
WBOYオリジナル
2016-06-24 11:36:531138ブラウズ

一、长度单位 

  CSS中,长度单位有两种,分别是绝对长度单位和相对长度单位。 

  绝对长度单位 

  绝对长度单位分为in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica)。其中,in(英寸)、cm(厘米)、mm(毫米)和实际中常用的单位完全相同。重点介绍一下pt(磅)、pc(pica)。 

  pt(磅):是标准印刷上常用的单位,72pt的长度为1英寸。 
  pc(pica):这也是一个印刷上用的单位,1pc的长度为12磅。 

  绝对长度单位,虽然理解起来很容易,但是在网页的设计中很少用到。 

  相对长度单位 

  相对长度单位是使用最多的长度单位。包括em、ex、px,下面分别介绍一下。 

  em是定义文字大小的值,也就是文本中font-size属性的值。例如:定义某个元素的文字大小为12pt,那么,对于这个元素来说1em就是12pt。单位em的实际大小是受到字体尺寸的影响的。 

  ex和em类似,指的是文本中字母x的高度,因为不同的字体的x的高度是不同的,所以ex的实际大小,受到字体和字体尺寸两个因素的影响。 

  px就是通常所说的像素,使网页设计中使用最多的长度单位。将显示器分成非常细小的方格,每个方格就是一个像素。表面上看好像很容易理解,实际上,px的具体大小是受到屏幕的分辨率影响的,也就是和划分屏幕各自的方式有关。例如,同样是100px大小的字体,如果显示器使用800×600像素的分辨率,那么,每个字的宽度是屏幕的1/8。若将显示器的分辨率设置为1024×768像素,那么同样是100px字体的字,其宽度就越为屏幕宽度的1/10。

优缺点:

px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.

em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小.
比如


    这里的字是24px

em を使用してパディングを指定する場合、パディング幅は DIV 要素のフォント サイズに相対します。

pt は印刷業界で一般的に使用される単位であり、ページ印刷や植字にも一般的に使用されます。

上記の 3 種類の PX はピクセル単位、EM は相対単位、PT は絶対単位です。それぞれの利点は、PX がコンピューターの画面上で目的の効果を実現できること、およびプリンターやプリンターでも使用できることです。他の高解像度デバイスでも目的の効果を実現できます。
EM には多くの利点があります。たとえば、ページで親要素のフォント サイズを指定すると、1 つの要素を調整するだけですべての要素のサイズを比例的に変更できます。たとえば、スケーラブルなスタイル シートを作成するために使用されます。絶対単位は、スケーリングできず、測定デバイスを使用して測定できる固定長の単位です。通常は、それがすでにわかっている場合にのみ使用されます。ただし、ほとんどの場合、相対単位を使用するのが最善です。したがって、一般に、最適な単位を使用することはできません。 PX と EM はすべて手作業で入力されており、コピーされません。いえ。

1. IE は px を単位として使用するフォント サイズを調整できません。

2. ほとんどの外国の Web サイトがフォント ユニットとして em を使用しているためです。しかし、中国のネットユーザーの 96% 以上が IE ブラウザ (またはカーネル) を使用しています。 px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px はモニター画面の解像度を基準としています。 (CSS2.0マニュアルより引用)

emは相対的な長さの単位です。現在のオブジェクト内のテキストに対する相対的なフォント サイズ。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。 (CSS2.0マニュアルより引用)

どのブラウザのデフォルトのフォント高さも16pxです。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。 font-size の変換を簡略化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値は 16px*62.5%=10px となり、12px=1.2em、10px=1em となります。 , また、つまり、元の px 値を 10 で割って、単位を em に変更するだけです。

em には次の特性があります:

1. em の値は固定されていません。

2. Em は親要素のフォント サイズを継承します。

そのため、CSS を記述するときは次の 2 つの点に注意する必要があります:

1. body セレクターで Font-size=62.5% を宣言します。 em を単位として

3. 拡大されたフォントの em 値を再計算します。フォント サイズの繰り返しの宣言は避けてください。

それは、1.2 * 1.2= 1.44 の現象を避けるためです。たとえば、#content でフォント サイズを 1.2em と宣言した場合、p のフォント サイズを宣言する場合、この em はその em ではなく、フォントを継承するため、1.2em ではなく 1em のみにすることができます。 #contentの高さは1em=12pxになりました。

ただし、例外は 12px の漢字です。つまり、上記の方法で取得した 12px (1.2em) の中国語文字は、IE で 12px によって直接定義されたフォント サイズと等しくなく、わずかに大きくなります。この問題は Jorux によって解決されました。ボディセレクターの 62.5% を 63% に変更するだけで正常に表示されます。その理由は、IE が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。他に説明があるかどうかはわかりません。




声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。