em单位_html长度单位EM

2019-06-19 21:42:35 html长度单位em介绍，什么时候用em，em如何换算成PX像素，在上面情况下css 设置em单位。

html长度单位em介绍，什么时候用em，em如何换算成PX像素，在上面情况下css 设置em单位。

em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合：1em=16px，所以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会继承父级元素的字体大小，会相对于父元素的字体大小而改变。

html css 使用em为单位实例完整HTML源代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css em单位使用百分数</title>
<style type="text/css">
body { background:#333; font-size: 62.5%; margin: 0px; padding: 0px;}/*设定页面的背景、文字、边白等*/
div{ background:#fff; width:450px; height:180px; margin:0 auto;
 padding:10px; border:4px #000 solid; font-size:1.2em;}
</style> 
</head>
<body>
<div>
body设置font-size: 62.5%;<br />
对div设置font-size:1.2em，相当于我字体大小就是12px。
</div>
</body>
</html>

截图：

em html长度单位实例

一般HTML5，手机网页使用EM为单位比较多。