html中的em的使⽤⽅法,css布局的em的使⽤⽅法
什么是弹性布局？
⽤户的⽂字⼤⼩与弹性布局
⽤户的浏览器默认渲染的⽂字⼤⼩是“16px”，换句话说，Web页⾯中“body”的⽂字⼤⼩在⽤户浏览器下默认渲染是“16px”。当然，如果⽤户愿意他可以改变这种字体⼤⼩的设置，⽤户可以通过UI控件来改变浏览器默认的字体⼤⼩。
弹性设计有⼀个关键地⽅Web页⾯中所有元素都使⽤“em”单位值。“em”是⼀个相对的⼤⼩，我们可以这样来设置
1em，0.5em，1.5em等，⽽且“em”还可以指定到⼩数点后三位，⽐如“1.365em”。⽽其中“相对”的意思是：
1.相对的计算必然会⼀个参考物，那么这⾥相对所指的是相对于元素⽗元素的font-size。⽐如说：如果在⼀个
设置字体⼤⼩为“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”是极其强⼤和灵活的，他不管字体⼤⼩是什么，是12px，16或60，他都可以计算出其值。
em其实就是⼀种排版的测试单位，⽽且他的由来还有⼀段⼩故事，关于这段⼩故事我就不和⼤家说了，因为⼤家都不是来听我讲故事的，我想⼤还是喜欢知道他在CSS中的那些事。
在CSS中，“em”实际上是⼀个垂直测量。⼀个em等于任何字体中的字母所需要的垂直空间，⽽和它所占据的⽔平空间没有任何的关系，因此：
如果字体⼤⼩是16px，那么1em=16px。
⼊门
在我们开始来了解CSS中的这个“em”之前，我们需要知道在浏览器下，他的默认字体⼤⼩。正好我们前⾯也这样做了，在所有现代浏览器中，其默认的字体⼤⼩就是“16px”。因此在浏览器下默认的设置将是：
1em = 16px
因此，在⼀个CSS选择器被写⼊时，浏览器就有了⼀个“16px”⼤⼩的默认字体。此时我们Web页⾯中的
就继承了这个“font-size:16px;”，除⾮你在CSS样式中显式的设置的“font-size”值，来改变其继承的值。这样⼀来，“1em =
16px”、“0.5em = 8px”、“10em = 160px”等等，那么我们也可以使⽤“em”来指定任何元素的⼤⼩。
设置Body的font-size
很多前辈在多年的实践中得出⼀个经验，他们建议我们在
中设置⼀个正⽂⽂本所需的字体⼤⼩，或者设置为“10px”，相当于(“0.625em或62.5%”)，这样为了⽅便其⼦元素计算。这两种都是可取的。但是我们都知道，的默认字体是“16px”，同时我们也很清楚了，我们改变了他的默认值，要让弹性布局不被打破，就需要重新进⾏计算，重新进⾏调整。所以完美的设置是：
body {font-size:1em;}
可是在那个没⼈爱的IE底下，“em”会有⼀个问题存在。调整字体⼤⼩的时候，同样会打破我们的弹性布局，不过还好，有⼀个⽅法可以解决：
html {font-size: 100%;}
公式转换——PXtoEM
如果你是第⼀创建弹性布局的，最好在⾝边准备⼀个计算器，因为我们⼀开始少不了很多的计算，有了他放⼼。
像素对于我们来说太密切了，因此我们也将从这开始。⾸先需要计算出1px和em之间的⽐例，然后是知道我们需要的px值。通过前⾯的介绍，⼤家都知道1em总是等于⽗元素的字体⼤⼩，因此我们完全可以通过下⾯的⼯式来计算：
html里的float是什么意思1 ÷ ⽗元素的font-size × 需要转换的像素值 = em值
⼤家可以参考⼀下⾯这张转换表(body字体为16px时的值)
接下来我们⼀起看⼀个很简单的实例“使⽤CSS的EM制作⼀个960px宽度的弹性布局”
HTML Markup
…
将960px转换为em
1 ÷ 16px × 960px = 60em
这个计算值的前提条件是
的“font-size:16px”。
CSS Code
html {
font-size: 100%;
}
body {
font-size: 1em;
}
#container {
width: 60em;
}
通过上⾯的实例，我想⼤家更能形像化的理解了，因为有例可询，其实我们可以把上⾯的计算公式转换⼀下，将更⽅便你的计算：
需要转换的像素值 ÷ ⽗元素的font-size = em值
那么我们上⾯的实例“960px”就可以这样来转换成“em”值
960px ÷ 16px = 60em
上⾯我们⼀起见证了“px”转换成“em”的计算⽅式，接下来我们⼀起来动看制作上⾯展⽰过的弹性布局样例。下⾯我们主要⼀起来⼀步⼀步的实现他。
构建⼀个弹性的容器
要创建弹性布局样例那样的居中效果，我们⾸先需要创建⼀个HTML结构，我在此给创建⼀个
并且取名叫“wrap”
content here
我们希望这个容器是⼀个“740px”宽，适合⼀个“800px × 600px”显屏的实例。那么“740px”会等于多少“em”呢？这就是我们需要关⼼的问题，⼤家⼀起来看吧：
1、将“740px”转换成“em”设置到我们的容器“div#wrap”：我们都知道“div#wrap”的⽗元素
设置了字体为“16px”，那么此时在没有进⾏另外显⽰的设置时，他的⼦元素
将继承“font-size”值，这样我们就可以轻意得到：“1px和1em之间的关系”
1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em
这样⼀来，我们的“740px”就很容易的能转换成“em” 0.0625em × 740 = 46.25em
当然⼤家也可以按照我们前⾯所列出的计算公式来进⾏转换，这样你⼼中更具有⼀个概念性，也不容易弄错：
1 ÷ 16 × 740 = 46.25em (1 ÷ ⽗元素的font-size × 需要转换的像素值 = em值)
这样⼀来，您可以使⽤上⾯的公式计算出您需要的任何宽度或⾼度的“em”值，你只需要知道“1px等于多少em”，另外就是你要转换
的“px”值是多少，具备这⼏个参数你就能得到你想要的“em”值了。
2、创建CSS样式：现在我们可以给“div#wrap”写样式了，弹性布局样例很明显的告诉我们，给“div#wrap”设置了⼀个宽度
为“740px”居中，带有上下“margin”为“24px”，⽽且带有“1px”的边框效果，那么我们⾸先根据上⾯的公式计算出相应的“em 值”，然后在写到CSS样式中：
html {font-size: 100%;}
body {font-size: 1em;}
#wrap {
width: 46.25em;/*740px ÷ 16 = 46.25em */
margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/
border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/
}
现在我们就轻松的创建了⼀个包含内容的弹性容器：弹性布局样例。
⽂本样式与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中插⼊⼀张图⽚：
....
<
我们这张图⽚具有“90px”的宽和⾼，同时具有⼀个右边距和底边距为“18px”设置，⽽且还进⾏左浮动。下⾯我们就⼀起来看其如何实现图⽚这⼏个样式效果：
从HTML结构中，我们很清楚的知道，图⽚是段落“p”的⼦元素，通过前⾯的介绍，你们知道这个段落“p”的“font-size”值被得定义为“12px”，因此我们计算图⽚的属性值时，不能在按“1px = 0.0625em”或者“1em=16px”来计算，我们需要使⽤最⽼的公式计算：
1 ÷ ⽗元素的font-size × 需要转换的像素值 = em值
这样⼀来，按上⾯所⽰的公式，我们就可以计算出图⽚的⼤⼩：
1 ÷ 1
2 × 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值
我们来看⼀个实例：
test
我们在body默认字体⼤⼩为“16px”，此时需要“div#wrapper”的相关参数值为：
#wrapper {
width: 200px;
height: 100px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。