【转】【前端】CSS中强大的EM

时间  2019-11-12
标签 前端 css 强大 栏目 CSS 繁體版
原文   原文链接

转载自：http://www.w3cplus.com/css/px-to-emcss

使用CSS也很久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要缘由是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”做为单位设置元素，因此从头对“em”学习了一回。稍为有一点理解，今天特地整理了一份博文与你们一块儿分享，但愿对童子们有些许的帮助。html

这篇教程将引导你们如何使用“em”来建立一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在咱们就一块儿带着这些问题开始今天的“em”之行。node

什么是弹性布局？

用户的文字大小与弹性布局web

用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。固然，若是用户愿意他能够改变这种字体大小的设置，用户能够经过UI控件来改变浏览器默认的字体大小。浏览器

弹性设计有一个关键地方Web页面中全部元素都使用“em”单位值。“em”是一个相对的大小，咱们能够这样来设置1em，0.5em，1.5em等，并且“em”还能够指定到小数点后三位，好比“1.365em”。而其中“相对”的意思是：app

  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”呢？这就是咱们须要关心的问题，你们一块儿来看吧：

一、将“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”值了。

二、建立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”。

一、给段落设置样式：——“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 */
			}

二、给标题设置一个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 ÷ 父元素的font-size × 须要转换的像素值 = em值

二、其它属性的计算公式须要换成

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值*/
			}

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

总结

长篇介绍了一大堆，惟一想告诉你们的是如下几点

一、浏览器的默认字体大小是16px

二、若是元素自身没有设置字体大小，那么元素自身上的全部属性值如“boder、width、height、padding、margin、line-height”等值，咱们均可以按下面的公式来计算

1 ÷ 父元素的font-size × 须要转换的像素值 = em值

三、这一种千万要慢慢理解，否则很容易与第二点混了。若是元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：

1 ÷ 父元素的font-size × 须要转换的像素值 = em值

那么元素设置了字体大小，此元素的其余属性，如“border、width、height、padding、margin、line-height”计算就须要按照下面的公式来计算：

1 ÷ 元素自身的font-size × 须要转换的像素值 = em值

这样说，不知道你们理解了整明白了没有，若是没有整明白，能够回过头来看上面的一个实例。

参考阅读

若是你们对我所说的还不是很了解，你们能够点击下面的相关博文:

  1. W3C的《The amazing em unit》
  2. typophile.com的《The Em》
  3. Webtypography的《The Elements of Typographic Style Applied to the Web》
  4. CSS2中的Font-size
  5. CSS2: Assigning property values, Cascading, and Inheritance
  6. Mike Cherim的《CSS Layouts: The Fixed. The Fluid. The Elastic》
  7. Roger Johansson的《Fixed or fluid width? Elastic!》
  8. Patrick Griffiths的《Elastic Design》

最后在结束此篇教程之时，咱们一块儿来感谢Jon 陳给咱们带来这么好的教程《The Incredible Em & Elastic Layouts with CSS》。

如需转载烦请注明出处：W3CPLUS

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程