CMS源码库-专注织梦微擎模板插件源码整合分享!

全部

  • 全部
  • 织梦模版
  • 微擎源码
  • WP主题
  • 织梦插件
  • 建站教程

分享

em单位html长度单位EM

发布于:2019-08-18 17:52    阅读次数:

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为单位比较多。

推荐模板
查看更多

相关教程

html不换行空格代码html不换

div边框原来有这么多种设

html注释支持if条件判断的

css设置空格宽度间距样式