em单位使用小结
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单位使用小结的更多相关文章
- rem单位和em单位的使用
今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧! 一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智. 接下来就是rem ...
- 推荐font-size的单位 % em单位
在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的.大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看 ...
- css em单位
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器 ...
- em 单位
借 Lea verou 的话: 当某些值相互依赖时,应该把它们的相互关系用代码表达出来. 通常情况下,我们会希望字号和其他尺寸能够跟父元素的字号建立关联,此时em就很好的表达了这种关系. 在CSS V ...
- dp\dpi\px\pt\em单位长度理解
屏幕都有固定的物理长宽度属性和分辨率 比如电脑.比如手机屏幕 例如有手机屏幕尺寸是1.5英寸x2英寸,屏幕分辨率为240x320, 那么可以推算水平方向每英寸的像素数(dpi)是:240/1.5=16 ...
- CSS 中的 em单位
em的对应的像素值如何计算,一言以蔽之:em就是倍数当前元素font-size的倍数,其结果就是当前字体的像素值乘以em的值,至于font-size来自何处?有两个来源:继承自父元素和通过CSS直接设 ...
- css中em单位详解，说明
em详解 em可以理解成“倍”. em会以父级元素中所设置的字体像素值为基准值进行成倍放大: 字体大小=(父级元素中的字体像素 * em的值) 例: 网页部分代码如下: 1.我现在没有在父级 ...
- css中font-size的单位总结：px、em、pt
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指 ...
- CSS尺寸单位 % px em rem 详解
在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...
随机推荐
- word2vec 在 非 自然语言处理 (NLP) 领域的应用
word2vec 本来就是用来解决自然语言处理问题的,它在 NLP 中的应用是显然的. 比如,你可以直接用它来寻找相关词.发现新词.命名实体识别.信息索引.情感分析等:你也可以将词向量作为其他模型的输 ...
- Express+Mongoose(MongoDB)+Vue2全栈微信商城项目全记录
最近用vue2做了一个微信商城项目,因为做的比较仓促,所以一边写一下整个流程,一边稍做优化. 项目github地址:https://github.com/seven9115/vue-fullstack ...
- Debian GNU/Linux 8.4 (jessie)编译安装php.md
编译遇到的问题很多.网上的文章往往是记录遇到的报错,贴上对应的解决. 而实际的环境,如操作系统,安装的软件必然有差异,所以,更重要的是,如何找到解决方法(不担保按步骤做可以编译成功),并将过程自动化. ...
- MongoDB高级索引
1. 索引数组字段 创建和使用跟普通字段的索引一样. 2. 索引子文档字段: 创建索引: db.users.ensureIndex({"address.city":1," ...
- centos 安装giblab
本文章转载自:http://www.cnblogs.com/fanjingfeng/p/6665597.html 一, 服务器快速搭建gitlab方法 可以参考gitlab中文社区 的教程 cento ...
- 最全的命令行（gradle）打包安卓apk
最近研究安卓方面的打包,因为是React Native,不能使用Android studio打包.找了半天资料,发现没有一个全面的.下面,我来讲解自己下打包时自己遇到的各种坑. 1.首先,需要在项目顶 ...
- Maple trees（最小覆盖圆）
Maple trees Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- Python-week1，第一周（基于Python3.0以上）
1,变量 准确来说不是第一周学习了吧,应该是采用博客记录学习的第一周,记录并做个笔记吧,可能做的不好,但我高兴啊,废话不说了,上图. 学习过程中做的一些笔记,当然能面面俱到,只能在写博客的时候又能复习 ...
- 设备类型检测大全---userAgent
对各种类型的设备的检测,以及所使用的浏览器的类型 function detect(ua) { var os = this.os = {}; var browser = this.browser = { ...
- iOS 极光推送的集成以及一些集成后的狗血
1.首先进入极光文档下载激光推送的SDk---传送门http://docs.jiguang.cn/jpush/client/iOS/ios_sdk/ 将解压后的lib子文件夹(包含JPUSHSer ...