用户的笔墨大小与弹性布局
用户的浏览器默认渲染的笔墨大小是“16px”，换句话说，Web页面中“body”的笔墨大小在用户浏览器下默认渲染是“16px”。当然，如果用户乐意他可以改变这种字体大小的设置，用户可以通过UI控件来改变浏览器默认的字体大小。
弹性设计有一个关键地方Web页面中所有元素都利用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”。而个中“相对”的意思是：
1.相对的打算一定会一个参考物，那么这里相对所指的是相对付元素父元素的font-size。比如说：如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继续他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“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页面中的<body>就继续了这个“font-size:16px;”，除非你在CSS样式中显式的设置<body>的“font-size”值，来改变其继续的值。这样一来，“1em = 16px”、“0.5em = 8px”、“10em = 160px”等等，那么我们也可以利用“em”来指定任何元素的大小。
设置Body的font-size
很多前辈在多年的实践中得出一个履历，他们建议我们在<body>中设置一个正文文本所需的字体大小，或者设置为“10px”，相称于（“0.625em或62.5%”），这样为了方便其子元素打算。这两种都是可取的。但是我们都知道，<body>的默认字体是“16px”，同时我们也很清楚了，我们改变了他的默认值，要让弹性布局不被冲破，就须要重新进行打算，重新进行调度。以是完美的设置是：
body {font-size:1em;}
可是在那个没人爱的IE底下，“em”会有一个问题存在。调度字体大小的时候，同样会冲破我们的弹性布局，不过还好，有一个方法可以办理：
html {font-size: 100%;}
公式转换——PXtoEM
如果你是第一创建弹性布局的，最好在身边准备一个打算器，由于我们一开始少不了很多的打算，有了他放心。
像素对付我们来说太密切了，因此我们也将从这开始。首先须要打算出1px和em之间的比例，然后是知道我们须要的px值。通过前面的先容，大家都知道1em总是即是父元素的字体大小，因此我们完备可以通过下面的工式来打算：
1 ÷ 父元素的font-size × 须要转换的像素值 = em值
大家可以参考一下面这张转换表(body字体为16px时的值)
接下来我们一起看一个很大略的实例“利用CSS的EM制作一个960px宽度的弹性布局”
HTML Markup
<body>
<div id=\"大众container\"大众>…</div>
</body>
将960px转换为em
1 ÷ 16px × 960px = 60em
这个打算值的条件条件是<body>的“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构造，我在此给创建一个<div>并且取名叫“wrap”
<body>
<div id=\"大众wrap\公众> content here</div>
</body>
我们希望这个容器是一个“740px”宽，适宜一个“800px × 600px”显屏的实例。那么“740px”会即是多少“em”呢？这便是我们须要关心的问题，大家一起来看吧：
1、将“740px”转换成“em”设置到我们的容器“div#wrap”：我们都知道“div#wrap”的父元素<body>设置了字体为“16px”，那么此时在没有进行其余显示的设置时，他的子元素<div id=\"大众wrap\"大众>将继续“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
首先我们在前面那个创建的<div id=\公众wrap\公众></div>中插入一个<h1>和一个<p>:
<div id=\"大众wrap\公众>
<h1>...</h1>
<p>...</p>
</div>
在弹性布局样例实例中，我们标题利用了“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值
这样说，不知道大家理解了整明白了没有，如果没有整明白，可以回过分来看上面的一个实例。转自：http://www.uml.org.cn/html/201207311.asp
