1、px：像素，精确显示

2、em：继承父类字体的大小，相当于“倍”，如：浏览器默认字体大小为16px=1em，始终按照div继承来的字体大小显示，进场用于移动端

em换算工具：http://www.runoob.com/tags/ref-pxtoemconversion.html

3、rem：与em类似，rem是继承根节点的属性（即<html>标签），其他的与em相同

4、vh：当前可见高度的1%=1vh

区别是：当div中没有内容时，height=100%，则高度不显示出来

当div中没有内容时，height=100vh，则高度依然能显示出来

5、vw：当前可见宽度的1%=1vw

区别是：当div中没有内容时，width=100%，则宽度不显示出来

当div中没有内容时，width=100vh，则宽度依然能显示出来

CSS3中的px,em,rem,vh,vw辨析的更多相关文章

  1. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

  2. CSS3中的px,em,rem,vh,vw

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...

  3. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

  4. 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...

  5. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  6. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  7. px,em,rem的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  8. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  9. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

随机推荐

  1. Android国际化--I18N

    在res下创建对应国家的环境的目录如:values-zh,values-en,然后在对应的目录下将对应的字符串翻译成对应国家的语言即可.

  2. 关于Django 错误 doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS

    记录一下 报错 doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS\ 这个问题出现没 ...

  3. 练习JavaScript实现梯形乘法表

    效果: 表格用html中的table,tr,td,然后利用for语句实现,循环输出行和列,再根据行列的数量进行乘法运算,第一个for循环输出9行,然后内嵌一个for,在条件表达式中取第一个for循环的 ...

  4. py-faster-rcnn几个辅助脚本

    py-faster-rcnn本身代码很棒. 不过使用它的时候,还是需要自己写一些脚本,作为辅助. 1 所有.py文件顶部添加utf8编码声明.因为有时候需要添加中文注释,不声明编码会报错 #inser ...

  5. apache.commons.compress 压缩，解压

    最近在一个前辈的指引下,开始研究apache.commons.都是网上找的,而且不会中文乱码,而且还可以在压缩包里面加一层文件夹 package my.test; import java.io.Buf ...

  6. ubuntu安全卸载移动硬盘(safely remove)

    移动磁盘不能安全卸载.在网上找到的资料如下: sudo apt-get install udisks sudo umount /dev/sdb1 sudo udisksctl power-off -b ...

  7. POJ 2251 Dungeon Master（3D迷宫 bfs）

    传送门 Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 28416   Accepted: 11 ...

  8. MDK5 STM32编译问题汇总

    MDK5 STM32编译问题汇总 WIN8.KEIL-MDK-5 编译时,出现弹窗"The ARM C/C++ Compiler 已停止工作",关闭弹窗后,编译输出的窗口中出现如下 ...

  9. UML大战需求分析--阅读笔记3

    这次阅读的是第四章,流程分析利器之 – 活动图.对需求有两种分析的方式:结构建模与行为建模.活动图是行为建模中经常使用的一种图.由流程图发展而来. 活动图中有一些名词:开始状态.结束状态.活动.判断. ...

  10. p/invoke碎片--对数组的封送处理

    因为数组是引用类型,所以数组的处理根据数组元素的类型是否为“可直接传递到非托管代码”的类型而分为两种情况.主要目标是看内存是怎么变化的,是复制还是锁定. 数组中的元素是"可直接传递到非托管代 ...