ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose のユニット
一、长度单位
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单位是指父元素的字体大小.
比如
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 が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。他に説明があるかどうかはわかりません。