CSS_html/css_WEB-ITnose のユニット

Jun 24, 2016 am 11:36 AM

一、长度单位 

  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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

See all articles