CSS の px と em_html/css_WEB-ITnose-htmlチュートリアル-php.cn

柔軟なレイアウトとは何ですか?
ユーザーのテキストサイズと柔軟なレイアウト
ユーザーのブラウザで表示されるデフォルトのテキストサイズは「16px」です。つまり、Web ページの「本文」のテキストサイズは、ユーザーのブラウザのデフォルトでは「16px」です。もちろん、ユーザーは必要に応じて、UI コントロールを使用してブラウザのデフォルトのフォントサイズを変更できます。
柔軟なデザインの重要なポイントは、Web ページ内のすべての要素が「em」単位値を使用することです。「em」はこのように1em、0.5em、1.5emなどの相対的なサイズを設定できるほか、「1.365em」のように小数点以下3桁まで指定することもできます。「相対」の意味は次のとおりです:
1. 相対計算には参照オブジェクトが必要です。そのため、ここでの相対とは、要素の親要素に対する相対的なフォントサイズを指します。たとえば、

でフォントサイズを「16px」に設定すると、その子孫要素で表示設定がリセットされない限り、この

の子孫要素はそのフォントサイズを継承します。このとき、子要素のフォントサイズを「0.75em」に設定すると、そのフォントサイズは「0.75 X 16px = 12px」に相当するように計算されます。
2. ユーザーがブラウザの UI を通じて変更した場合。テキストのサイズを制御すると、ページ全体も拡大 (または縮小) されるため、ユーザーがブラウザのフォントを変更した後にページ全体が崩れてしまうことはありません (この現象は誰もが遭遇したことがあると思います)信じないで、試してみてください。自分で作ったプロジェクトを試してみてください。怖いでしょう）。
この柔軟なレイアウトのサンプルをチェックしてください。このとき、ブラウザの UI コントロールを使用してテキストサイズを変更するか、「ctrl +」および「ctrl -」を直接使用します。ブラウザでフォントサイズを変更すると、ブラウジングが拡大されます。ページ全体のレイアウトには影響しません。注: この例のすべての HTML と CSS は、このチュートリアル全体で使用されます。
その他の柔軟なレイアウトの例として、Dan Cederholm の Simplebites を参照し、テキストサイズを変更して参照することができます。
体験してみて、フレキシブルレイアウトページは非常に柔軟で、「px」と同じくらい正確だと思いますか?したがって、「font-size」、「px」、「em」の基本的な関係をマスターしていれば、CSS を使用して正確なレイアウトをすぐに作成できます。
CSS の Elastigirl が EM を紹介します
Elastigirl の「em」は、フォントサイズが 12 ピクセル、16、または 60 であっても、その値を計算できます。
em は実際には植字テストユニットであり、その起源についてはちょっとした話はありません。なぜなら、あなたは私の話を聞きに来ないと思うからです。彼がCSSで何をしているのか。
CSS では、「em」は実際には垂直方向の寸法です。 em は、フォントの文字に必要な垂直方向のスペースに等しく、それが占める水平方向のスペースとは何の関係もありません。つまり、次のようになります。
フォントサイズが 16px の場合、1em=16px。
はじめに
CSS でこの「em」を理解し始める前に、ブラウザーでのデフォルトのフォントサイズを知る必要があります。たまたま、以前にこれを行ったのですが、最近のすべてのブラウザでは、デフォルトのフォントサイズが「16px」です。したがって、ブラウザのデフォルト設定は次のようになります:
1em = 16px
したがって、CSS セレクターが記述されるとき、ブラウザのデフォルトのフォントサイズは「16px」になります。現時点では、CSS スタイルの "font-size" 値を明示的に設定して継承値を変更しない限り、Web ページの

はこの "font-size:16px;" を継承します。このように、「1em = 16px」、「0.5em = 8px」、「10em = 160px」などのように、「em」を使用して任意の要素のサイズを指定することもできます。
本文のフォントサイズを設定する
多くの先輩は、長年の実践から経験を積んでおり、本文に必要なフォントサイズをに設定するか、つまり「10px」に設定することを提案しています。サブ要素の計算を容易にするために、(「0.625em または 62.5%」) に相当します。どちらも望ましいです。しかし、のデフォルトのフォントが「16px」であることは誰もが知っていますが、同時に、柔軟なレイアウトが壊れないようにするには、再計算する必要があることも知っています。調整する。したがって、完璧な設定は次のとおりです:
body {font-size:1em;}
しかし、その愛されていない IE では、「em」に問題が発生します。フォントサイズを調整すると、柔軟なレイアウトも壊れますが、幸いなことに、それを解決する方法があります:
html {font-size: 100%;}
数式変換??PXtoEM
初めて作成する場合柔軟なレイアウトはい、電卓をそばに置いておくのがベストです。最初はたくさんの計算をする必要があるため、電卓があると安心です。
ピクセルは近すぎるので、同様にそこから始めます。まず 1px と em の比率を計算し、必要な px 値を知る必要があります。前の説明で、1em が常に親要素のフォントサイズと等しいことは誰もが知っているため、次の式で完全に計算できます:
1 ÷ 親要素のフォントサイズ × 変換されるピクセル値 = em value
全員以下の変換表を参照してください (本文フォントが 16px の場合の値)

次に、「CSS EM を使用して幅 960px の柔軟なレイアウトを作成する」という非常に簡単な例を見てみましょう
HTML マークアップ

			<body>				<div id="container">	…</div>			</body>

ログイン後にコピー

960px を em に変換
1 ÷ 16px × 960px = 60em
この計算値の前提条件は、の "font-size:16px" です。
CSS コード

							html {				font-size: 100%;			}						body {				font-size: 1em;			}						#container {				width: 60em;			}

ログイン後にコピー

上記の例を通して、実際に上記の計算式を変換することができ、より便利になるため、誰もがより視覚的に理解できると思います。計算:
変換する必要のあるピクセル値 ÷ 親要素のフォントサイズ = em 値
次に、上記の例「960px」は「em」値に変換できます
960px ÷ 16px = 60em
見てみましょう以上をまとめて「px」を「em」に変換する計算方法がわかったところで、上記の柔軟なレイアウトを作成する例を見てみましょう。以下では主にステップバイステップで実装していきます。
フレキシブルコンテナを構築する
フレキシブルレイアウトの例のようなセンタリング効果を作成するには、まず HTML 構造を作成し、「wrap」という名前を付けます。このコンテナの幅は「800px × 600px」のインスタンスに適した「740px」にしたいと考えています。では、「740px」は何個の「em」に相当するのでしょうか?これについては、一緒に見てみましょう: 1. 「740px」を「em」に変換し、コンテナ「div#wrap」に設定します。「div」の親要素は誰もが知っています。 #wrap” はフォントを「16px」に設定し、この時点で追加の表示設定が行われていない場合は、その子要素

が「font-size」値を継承します。これは、「1px と 1em の関係」を意味します。 1em = 16px、つまり、1px = 1 ÷ 16 = 0.0625em このようにして、「740px」を「em」0.0625 に簡単に変換できます。 em × 740 = 46.25em 2. CSS スタイルの作成: これで、「div#wrap」のスタイルを記述できるようになりました。エラスティックレイアウトの例では、「div#wrap」の中央に「740px」の幅が設定され、「上下」が設定されていることが明確にわかります。「margin」は「24px」で、境界線効果は「1px」です。次に、最初に上記の式に従って対応する「em 値」を計算し、それを CSS スタイルに書き込みます。これで、コンテンツを含むフレキシブルコンテナを簡単に作成できます: フレキシブルレイアウトサンプル。テキストスタイルと em

もちろん、上記の計算式に従って変換することもできます。これにより、より良い概念を念頭に置き、間違いを犯しにくくなります:
1 ÷ 16 × 740 = 46.25em (1 ÷ 親要素 (font-size 、もう 1 つは変換したい "px" 値です。これらのパラメーターを使用すると、必要な "em" 値を取得できます。

まず、以前に作成した

に

と

を挿入します。
在弹性布局样例实例中，我们标题使用了“18px”，而段落设置的是“12px”字体，同时其行高是“18px”。18px将是我们实现弹性布局的一个重要值，可以使用他们都按正比变化。（有关于标题和段落的排版介绍，大家感兴趣可以点击Richard Rutter的basic leading和vertical rhythm以及chapter on vertical motion的相关介绍）。
根据CSS继承一说，我们在“div#wrap”的内容容器中没有显式的设置字体大小，这样整个“div#wrap”将继承了其父元素“body”的字体??“16px”。
1、给段落设置样式：??“12px”的字体，“18px”的行高以及margin值
从CSS继承中，我们可以得知我们所有段落继承了其父元素“div#wrap”的“font-size:16px”。同时我们通过前面的介绍得知1px = 1 ÷ 16 = 0.0625em，这样一来我们就很轻松的知道“12px”等于多少个“em”
0.0625em × 12 = 0.750em
这样我们就可以给段落p设置样式：
p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}
要计算出段落所需的行高和“margin”为“18px”，来满足Richard Rutter说的basic leading，那我们就需要像下面的方法和来计算：
18 ÷ 12 = 1.5em
使用所需的行高值“18px”直接除以“字体大小12px”，这样就得到了段落“p”的“line-height”值。在本例中行高就等于字体的“1.5”倍，接着我们把“line-height”和“margin”样式加到段落“p”中

							p{				font-size: 0.75em;/*0.625em × 12 = 0.750em */				line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */				margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */			}

ログイン後にコピー

2、给标题设置一个18px的字号
标题“h1”和段落“p”一样的原理，他也是继承他父元素“div#wrap”的“16px”的“font-size”，所以我们也是按同样的方法可以计处出他的“em”
0.0625em × 18 = 1.125em
我们可以把得出的值写到CSS样式表中

							h1 {				font-size: 1.125em;/*0.625em × 18 = 1.125em*/			}

ログイン後にコピー

同样为了保留Richard Rutter所说的vertical rhythm，我们同样将标题“h1”的“line-height”和“margin”都设置为“18px”，使用方法前面介绍的方法。很容易得到他们的“em”值为“1em”:

							h1 {				font-size: 1.125em; /*0.625em × 18 = 1.125em*/				line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */				margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */			}

ログイン後にコピー

设置图片大小??使用em
要做出弹性布局样例这样的果，我们也需要在html中插入一张图片：

							<body>				<div id="wrap">					<h1>....</h1>					<p><img src="90.png" alt="" /> Lorem...</p>				</div>			</body>

ログイン後にコピー

我们这张图片具有“90px”的宽和高，同时具有一个右边距和底边距为“18px”设置，而且还进行左浮动。下面我们就一起来看其如何实现图片这几个样式效果：
从HTML结构中，我们很清楚的知道，图片是段落“p”的子元素，通过前面的介绍，你们知道这个段落“p”的“font-size”值被得定义为“12px”，因此我们计算图片的属性值时，不能在按“1px = 0.0625em”或者“1em=16px”来计算，我们需要使用最老的公式计算：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
这样一来，按上面所示的公式，我们就可以计算出图片的大小：
1 ÷ 12 × 90 = 7.5em
现在你就可以将计算出来的值写到样式中去：

							p img {				width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的宽度) = 7.5em */				height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的高度) = 7.5em */			}

ログイン後にコピー

我们在段落中知道了“18px”刚好是“1em”，现在我们也把他使用到图片的样式中：

							p img {				width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的宽度) = 7.5em */				height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的高度) = 7.5em */				margin: 0 1.5em 1.5em 0;				float: left;			}

ログイン後にコピー

这样我们就制作出一个和弹性布局样例一样的效果。希望通过这样的一个实例能帮助大家了解如何使用“em”来创建一个弹性布局的方法。当然大家可能还在担心使用“em”来制作一个弹性布局，不能像“px”一样的的精确，如果你真正理解了这篇教程后，我想你不会在有这样的想法。
弹性布局的公式总结
最后我想大家肯定和我会有同一种想法，就是相关参数是的“px”值如何成功而且正确的转换成“em”值，经过上面的学习，我最后将公式总结一下：
元素自身没有设置字号大小时，元素的width、height、line-height、margin、padding、border等值转换都按下面公式转换：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
我们来看一个实例：

							<body>				<div id="wrapper">test</div>			</body>

ログイン後にコピー

我们在body默认字体大小为“16px”,此时需要“div#wrapper”的相关参数值为：

							#wrapper {				width: 200px;				height: 100px;				border: 5px solid red;				margin: 15px;				padding: 10px;				line-height: 18px;			}

ログイン後にコピー

那么我们按照上面的公式，将所在参数进行转换：

							#wrapper {				width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/				height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/				border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/				margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/				padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/				line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/			}

ログイン後にコピー

我们一起来看计算出来的值：

接下来我需要大家在来看一个效果，这一点很关键哟，仔细看好，在同样的参数基础上稍加一条元素本身设置字体大小为：14px；，大家可以会说很简单的呀，按前面的公式计算出来加上就是了，那么我现在就按大家说的计算加上：

							#wrapper {				font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/				width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/				height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/				border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/				margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/				padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/				line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/			}

ログイン後にコピー

此进我们在firebug下看计算出来的layout值

为了更好的说明问题，我把元素自身没有设置字体大小和元素自身设置了字体大小，两者在firebug计算出来值：

我截这个图的主要意图是，说明一个问题就是元素自身要是设置了字体大小后，其计算公式就不在是前面所说的，我们需要做一下修改：
1、字体计算公式依旧
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
2、其它属性的计算公式需要换成
1 ÷ 元素的font-size × 需要转换的像素值 = em值
那么我们现在来计算一回：

							#wrapper {				font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/				width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/				height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/				border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/				margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/				padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/				line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/			}

ログイン後にコピー

我们在来看一次计算出来的值：

总结
长篇介绍了一大堆，唯一想告诉大家的是以下几点
1、浏览器的默认字体大小是16px
2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
3、这一种千万要慢慢理解，不然很容易与第二点混了。如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

这样说，不知道大家理解了整明白了没有，如果没有整明白，可以回过头来看上面的一个实例。