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. Visual Stdio 无法直接启动带有“类库输出类型”的项目若要调试此项目，请在此解决方案中添加一个引用库项目的可执行项目。将这个可执行项目设置为启动项目！

    j解决方法:项目-属性-应用程序-输出类型-Windows应用程序

  2. 思维导图FreeMind安装问题及简单使用

    思维导图软件使用的坎坷之路 一直想将思维导图加入到工作环境当中 最开始使用的是 MindManager(http://www.mindmanager.cc/) ,而且感觉利用它制作出来的导图外观也比较 ...

  3. CADisplayLink 及定时器的使用

    第一种: 用CADisplayLink可以实现不停重绘. 例子:   CADisplayLink* gameTimer; gameTimer = [CADisplayLink displayLinkW ...

  4. 82.Android之MVP+Retrofit+RxJava实践小结

    转载:http://wuxiaolong.me/2016/06/12/mvpRetrofitRxjava/ 关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛 ...

  5. ubuntu 下应用 Python 和 SL4A 的 Android 应用程序搭建您自己的android研发环境

    转载自:http://code.qtuba.com/article-50680.html 最近在看<head first python>,书中有讲python在android中进行开发的章 ...

  6. Linux学习之CentOS(二十一)--Linux系统启动详解

      在这篇随笔里面将对Linux系统的启动进行一个详细的解释!我的实验机器是CentOS6.4,当然对于现有的Linux发行版本,其系统的启动基本上都是一样的! 首先我们来看下Linux系统启动的几个 ...

  7. 逆向工程学习第一天--一个VC6编译的小程序

    今天开始研究二进制了,开个文记录一下.下面是一个小程序的OD反汇编代码,自己尝试加了注释,本人逆向零基础,属于摸着石头过河的类型,有理解错误的地方,希望大牛不吝赐教. 源代码: #include< ...

  8. Java数据结构——树的三种存储结构

    (转自http://blog.csdn.net/x1247600186/article/details/24670775) 说到存储结构,我们就会想到常用的两种存储方式:顺序存储和链式存储两种. 先来 ...

  9. C++构造函数2

    一.构造函数分类 普通构造函数,复制(拷贝)构造函数,赋值构造函数, #include <iostream> using namespace std; class A { public: ...

  10. iOS and JAVA 的 RSA 加密解密 (转载整理 )

    参考原文地址:http://www.cnblogs.com/makemelike/articles/3802518.html (至于RSA的基本原理,大家可以看 阮一峰的网络日志 的 RSA算法原理( ...