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的高度不一样

　　可以见到，在浏览器中，input,textarea,keygen, select, button 这几个元素都是有浏览器默认字体的，如果想使用em控制表单元素的样式，需要给表单元素的font-size重新定义一下，防止浏览器默认的font-size影响了 em的使用。

em单位使用小结的更多相关文章

  1. rem单位和em单位的使用

    今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧! 一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智. 接下来就是rem ...

  2. 推荐font-size的单位 % em单位

    在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的.大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看 ...

  3. css em单位

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器 ...

  4. em 单位

    借 Lea verou 的话: 当某些值相互依赖时,应该把它们的相互关系用代码表达出来. 通常情况下,我们会希望字号和其他尺寸能够跟父元素的字号建立关联,此时em就很好的表达了这种关系. 在CSS V ...

  5. dp\dpi\px\pt\em单位长度理解

    屏幕都有固定的物理长宽度属性和分辨率 比如电脑.比如手机屏幕 例如有手机屏幕尺寸是1.5英寸x2英寸,屏幕分辨率为240x320, 那么可以推算水平方向每英寸的像素数(dpi)是:240/1.5=16 ...

  6. CSS 中的 em单位

    em的对应的像素值如何计算,一言以蔽之:em就是倍数当前元素font-size的倍数,其结果就是当前字体的像素值乘以em的值,至于font-size来自何处?有两个来源:继承自父元素和通过CSS直接设 ...

  7. css中em单位详解，说明

    em详解      em可以理解成“倍”. em会以父级元素中所设置的字体像素值为基准值进行成倍放大: 字体大小=(父级元素中的字体像素 * em的值) 例: 网页部分代码如下: 1.我现在没有在父级 ...

  8. css中font-size的单位总结：px、em、pt

    px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指 ...

  9. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

随机推荐

  1. python3中判断字串类型

    s为字串 s.isalnum() #所有字符都是数字或者字母,为真返回 Ture,否则返回 False. s.isalpha() #所有字符都是字母,为真返回 Ture,否则返回 False. s.i ...

  2. JAVA判断文件的内容类型

    Java 7 新的特性,判断文件的内容类型. Program to demonstrate Java 7 new feature : Determining the file content type ...

  3. ELK系列~对fluentd参数的理解

    这段时候一直在研究ELK框架,主要集成在对fluentd和nxlog的研究上,国内文章不多,主要看了一下官方的API,配合自己的理解,总结了一下,希望可以帮到刚入行的朋友们! Fluentd(日志收集 ...

  4. Java基础总结--面向对象1

    ---面向对象的概念---1.面向过程与面向对象的区别面向过程:是一种思维习惯,解决一个问题的时候靠的是一个个方法调用--核心是动作面向对象:是一种更接近生活中解决问题的思维习惯,解决特定的问题靠对象 ...

  5. switchhost -- 切换host的工具

    https://github.com/oldj/SwitchHosts/downloads 下载链接: 1,290 downloads SwitchHosts! _v0.2.2.1790.dmg - ...

  6. 你不知的DOM编程

    前言:随着vue,react, angular的流行,可能现在我们不必经常的操作DOM,三大框架在副交互的操作中发挥着极大地优势.因为我们知道用脚本对DOM的操作非常昂贵,本文主要探讨常规的DOM操作 ...

  7. IdentityServer4实现Token认证登录以及权限控制

    相关知识点 不再对IdentityServer4做相关介绍,博客园上已经有人出了相关的系列文章,不了解的可以看一下: 蟋蟀大神的:小菜学习编程-IdentityServer4 晓晨Master:Ide ...

  8. AngularJS学习篇（九）

    AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. $http.get('someUrl',config).then(s ...

  9. 【OpenCV】一种基于阈值的图片中的文字分割

    在今年泰迪杯A题电商中图片的文字识别这道题中,我们先用了一种很笨的办法来分割字符. 首先对图片进行灰度化,然后二值化,这里的二值化要选择一个合适的阈值.然后我们进行轮廓的提取,计算轮廓最小矩形的面积, ...

  10. Anaconda快捷搭建Python2和Python3环境

    我们在使用Pycharm编辑Python程序经常会因为不熟悉Python2和Python3的一些代码区别而导致错误,我们知道他们之间很多代码是必须运行在对应版本中的,否则是会报错的.因此,本文介绍一个 ...