em单位使用小结

最新推荐文章于 2020-12-21 21:29:04 发布

weixin_30372371

最新推荐文章于 2020-12-21 21:29:04 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/xjcjcsy/p/5201705.html

版权

　　em是一个css的单位。

　　em是一个相对的单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

　　一般在DOM元素中，当前行内对象内文本的字体尺寸是相对所指的是相对于元素父元素的font-size。比如说：如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；

　　具体的内容可以看http://www.w3cplus.com/css/px-to-em w3cplus的详细介绍。

　　说下我遇到的问题，我在使用的时候发现表单元素input和button使用em设置高度的时候出现了问题。高度总表现的和预期的不一样。

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
  body{
    font-size:16px;
  }
  input{
    display:block;
    height:2em;
    line-height:2em;
    padding:0;
    border:0 none;
    background-color:#FF0000;
  }
  div{
    margin-top:10px;
    border:1px solid #333;
    height:2em;
  }

  </style>
</head>
<body>
  <input type="text">
  <div></div>
</body>
</html>

发现在浏览器中input虽然和div属于同一个父级，但是发现input的高度和div的高度是不一样的。

浏览器对于表单元素input有一个默认的font-size，em根据这个行内文本的大小重新计算了高度，所以和div的高度不一样