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 ...
随机推荐
- day 33 线程
1.线程理论 什么是线程:线程是cpu的最小执行单位(实体),进程是操作系统的数据资源分配单位 2.线程的两种创建方式(重点) 查看线程的pid:使用os模块查看id,线程的id应该是相同的 3. ...
- Python - 入门基础(一)
1.解释器路径 #!/usr/bin/env python 2.编码 # -*- coding:utf8 -*- 1.ascill ---00000000 (8个位表示) 缺点:表示不了英文 2.u ...
- 初识hadoop之分布式文件系统(HDFS)
Hadoop常用发行版: Apache Hadoop CDH Cloudera Distributed Hadoop HDP Hortonworks Data Platfrom 分布式文件系统(H ...
- Python学习:13.Python正则表达式
一.正则表达式简介 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. 就其本质 ...
- C语言read函数的那些坑
今天在复习UNIX文件系统,用到那个read函数,但是无意中却掉到一个坑里了,用了一个多小时才找到问题根源,这里记录一下. 问题是这样的:我需要使用read和write函数把键盘输入的信息复制到输出. ...
- 解决「matplotlib 图例中文乱码」问题
在学习用 matplotlib 画图时遇到了中文显示乱码的问题,在网上找了很多需要修改配置的方法,个人还是喜欢在代码里修改. 解决方法如下: 在第2.3行代码中加上所示代码即可. import mat ...
- 面试和工作中的map
map是C++ STL中的关联容器,存储的是键值对(key-value),可以通过key快速索引到value.map容器中的数据是自动排序的,其排序方式是严格的弱排序(stick weak order ...
- ant-design-pro弹出框表单设置默认值
项目需求需要使用ant-design-pro的弹出框表单并在表单出现时设置默认值 然而按照官方的示例给 <Input> 标签设置 defaultValue 时发现并没有效果.如下所示: & ...
- 【课堂实践】Myod
实验内容 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 实验代码 od.java 截图 遇到的问题及解决办法 一开始想的方向是将得出的功能结果 ...
- [hdu6051]If the starlight never fade-[欧拉函数+原根]
Description 传送门 Solution orz大佬yxq..本题神仙 设g为P的原根. 设$x=g^{a}$,$y=g^{b}$. 由于$(g^{a}+g^{b})^{i}\equiv (g ...