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 ...
随机推荐
- [修正] Firemonkey Android 文字斜粗体显示不全的问题
问题:Firemonkey Android 平台显示斜粗体文字时,文字右方会有显示不全的问题. 修正代码: 请将 FMX.FontGlyphs.Android.pas 复制到自己的工程目录下,再修改如 ...
- Flume(5)-Ganglia监控
一. 安装Ganglia 1. 安装httpd服务与php sudo yum -y install httpd php 2. 安装其他依赖 sudo yum -y install rrdtool pe ...
- LVM实操
说明 以下所有操作都基于centos6.9 什么是LVM LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬 ...
- 详解Linux运维工程师高级篇(大数据安全方向).
hadoop安全目录: kerberos(已发布) elasticsearch(已发布)http://blog.51cto.com/chenhao6/2113873 knox oozie ranger ...
- 《PHP基础全面总结》系列分享专栏
<PHP基础全面总结>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201777.html 文章 PHP基础之运算符的使用方法 P ...
- Spring事务控制
我们在实际业务场景中,经常会遇到数据频繁修改读取的问题.在同一时刻,不同的业务逻辑对同一个表数据进行修改,这种冲突很可能造成数据不可挽回的错乱,所以我们需要用事务来对数据进行管理. 1. 到底什么是事 ...
- Linux入门进阶第六天——登录文件、开机与模块管理
一.登录文件概述 1.什么是登录文件 简单的说,就是记录系统活动信息的几个文件, 例如:何时.何地(来源 IP).何人 (什么服务名称).做了什么动作 (讯息登录啰). 换句话说就是:记录系统在什么时 ...
- 2017-2018-1 20155232 《信息安全系统设计基础》第四周学习总结以及课上myod练习补充博客
2017-2018-1 20155232 <信息安全系统设计基础>第四周学习总结以及课上myod练习补充博客 课上myod练习 1 参考教材第十章内容 2 用Linux IO相关系统调用编 ...
- spring_cloud多个微服务访问时偶发forward_error问题
1.问题: 最近在做SpringBoot项目的时候,有多个分开的微服务,偶发forward error 问题 2.猜想: 个人理解为服务跳转错误,可能本身没找到目标服务,或者目标服务损坏 3.解决: ...
- QT-2D编程
QT-[转]2D编程 Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕上和绘图·设备上进行绘制,主要基于QPainter.QPainterDevice和QPainterEngine这3个类. ...