CSS中px和em属性的特点与区别
详解px和em的特点和区别
象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?
◆px像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
◆em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
因此用px来定义字体,就无法用浏览器字体放大的功能。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
◆CSS中em属性有如下特点
1.em的值并不是固定的;
2.em会继承父级元素的字体大小。
◆所以我们在写CSS的时候,需要注意
1.body选择器中声明Font-size=62.5%;
2.将你的原来的px数值除以10,然后换上em作为单位;
3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。
CSS中px和em属性的特点与区别的更多相关文章
- css中px,em和rem的区别
css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...
- 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...
- CSS中px,em,rem,pt的区别及四者换算?
本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...
- css中字体常用单位px、em、rem和%的区别及用法总结
一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...
- CSS中强大的EM
(转)作者:dearjohn ,发布于2012-7-31 http://www.uml.org.cn/html/201207311.asp 使用CSS也好久了,但一直都是在使用“px”来设置Web元素 ...
- CSS中强大的EM(转)
转自:https://www.w3cplus.com/css/px-to-em CSS中强大的EM 作者:大漠 日期:2011-10-27 点击:97370 em 长度单位 编辑推荐:3月31日前,点 ...
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- CSS中具有继承性的属性:
CSS中具有继承性的属性: color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...
随机推荐
- 将http转为https访问
1.去阿里云购买证书 有免费一年的证书 最多20个 一个证书需要填写一个二级域名 www.xxx.com2.开启apache相应配置 #修改httpd.conf文件 LoadModule ssl_mo ...
- php以数组做为配置文件的读取和写入操作
最近想用php开发个简单的文章管理系统,主要是做一批垃圾采集站,目前网上的cms都太多功能了,导致修改个模板要很多文件,花费很多功夫.开始用thinkphp框架做,感觉还是麻烦,后来改用ci,做好了后 ...
- day 34线程的其他方法,线程池
线程的其他方法: from threading import Thread,current_thread: currrent_thread().getName() 获取线程的名称 current_ ...
- tarjan 强连通分量
一.强连通分量定义 有向图强连通分量在有向图G中,如果两个顶点vi,vj间(vi>vj)有一条从vi到vj的有向路径,同时还有一条从vj到vi的有向路径,则称两个顶点强连通(strongly c ...
- 20155317 王新玮 2016-2017-2 《Java程序设计》第5周学习总结
20155317 王新玮 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 异常处理 & Collection与Map 异常继承架构 错误的对象继承ja ...
- 20155321 《Java程序设计》实验五 网络编程与安全
实验内容 两人一组结对编程: 参考http://www.cnblogs.com/rocedu/p/6766748.html#SECDSA 结对实现中缀表达式转后缀表达式的功能 MyBC.java 结对 ...
- C语言复习20170805
循环控制结构 重复处理次数时已知的循环称为计数控制的循环,若重复处理次数为未知,是由给定情况控制的,称为条件控制的循环. C语言提供for.while.do while三种循环语句实现循环结构. 循环 ...
- Ubuntu + apache + Mysql +php
发生了乱码问题: 打开apache配置文件: sudo gedit /etc/apache2/apache2.conf,在最后面加上:AddDefaultCharset UTF-8,如果还乱码,再将U ...
- 覆盖Django mysql model中save方法时碰到的一个数据库更新延迟问题
最近有一个需求,通过django的admin后台,可以人工配置5张表的数据,这些数据进行一些业务规则处理后会统一成一份数据缓存在一个cache之中供服务端业务访问,因而任何一张表的数据更新(增.删.改 ...
- 【转】bash: ssh: command not found解决方法(linux)
原文转自:http://www.cnblogs.com/ahauzyy/archive/2013/04/25/3043699.html 今天在搭建hadoop的开发环境中,用的是centsos6.0的 ...