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换算工具:h ...

  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. cURL error 60: SSL certificate problem: unable to get local issuer certificate（转）【亲测】

    php5.6以上的版本会出现这种问题 解决办法: [开启拓展] extension=curl extension=openssl [配置证书] 访问https://curl.haxx.se/docs/ ...

  2. HttpUtility.HtmlDecode ，HttpUtility.HtmlEncode 与 Server.HtmlDecode ，Server.HtmlEncode 与 HttpServerUtility.HtmlDecode ， HttpServerUtility.HtmlEncode

    HtmlEncode: 将 Html 源文件中不允许出现的字符进行编码,通常是编码以下字符"<".">"."&" 等. ...

  3. OC 字典dictionaryWithObjectsAndKeys报错

    字典dictionaryWithObjectsAndKeys crash,也没有控制台打印输出: 解决方案!! 1.检查dictionaryWithObjectsAndKeys中的object key ...

  4. 小程序开发笔记（八）—Js数组按日期分组显示数据

    数据分组展示有两种方式,一种是后端直接传入分组格式的Json数据,另一种是我们在前端自己转换格式,这里我们在前端处理转换按日期分组的数据格式 1.例如后端返回数据格式为: [{createtime:' ...

  5. 【03】Nginx：location / root / alias

    写在前面的话 前面我们谈了 nginx 基础的 WEB 服务配置以及定制我们的日志显示格式,接下来我能更加详细的说说 server 字段. location 字段 在 Server 中,如果我们只是一 ...

  6. Appium 自动化测试配置wda的两种方式。

    tips:WebDriverAgent是Appium1.6.3以后版本新添加的模块,为了让appium与iPhone(基于xcuitest)设备进行通信而添加的.但是,这个模块在是一个独立的项目,在使 ...

  7. maven 学习---转换基于Maven的Web应用程序支持Eclipse IDE

    在上一节教程中,使用Maven创建了一个Web应用程序.这里有一个指南,告诉你如何转换Web应用程序到Eclipse IDE支持的形式. 注意,通过WTP工具Eclipse IDE支持Web应用程序, ...

  8. SQL的简单函数(极客时间)

    SQL的函数 函数就是将我们经常使用的代码封装起来, 需要的时候直接调用, 提高代码效率和可维护性. SQL函数一般是在数据上执行, 可以方便地转换和处理数据. 常用的SQL函数 SQL提供了一些常用 ...

  9. MySQL的select(极客时间学习笔记)

    查询语句 首先, 准备数据, 地址是: https://github.com/cystanford/sql_heros_data, 除了id以外, 24个字段的含义如下: 查询 查询分为单列查询, 多 ...

  10. 动态样式语言less初识

    资料参考与http://lesscss.cn/ Bootstrap--(less)下载安装配置 http://lesscss.cn Less使用两种方法 (1)在客户端使用LESS--学习 编写 x. ...