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. [2019BUAA软工助教]团队alpha得分总表

    [2019BUAA软工助教]团队alpha得分总表 [2019BUAA软工助教]团队alpha得分总表 一.团队累计得分 累计得分图 得分总表 二.各项得分计算规则 介绍与采访 项目选择与NABCD ...

  2. python免安装版（绿色版）制作

    一.实验环境 1.Windows7x64_SP1 二.需求背景 个人编写了一个软件安装器,用于一键安装开发软件及工具,该工具基于python + pywinauto. 但问题来了,新电脑上未安装pyt ...

  3. 坑爹的京东E卡（京东E卡的正确使用方式）

      前言    今年中秋公司发了200的京东E卡(下面简称礼品卡,京东简称jd)这让喜欢在jd自营购买商品的我很是开心,    兴致勃勃打开官网,当我选好商品准备结算时却发现礼品卡无法使用.    后 ...

  4. .NET Core 2.1 以下的控制台应用程序生成 EXE，且使用命令行参数动态运行控制器应用程序的示例

    文章: https://stackoverflow.com/questions/44038847/vs2017-compile-netcoreapp-as-exe 引用 <ItemGroup&g ...

  5. React及Nextjs相关知识点小结

    React及Nextjs知识点小结 函数式组件和类组件区别是什么 1.函数式组件是用于创建无状态的组件,组件不会被实例化,无法访问this中的对象,无法访问生命周期方法,是无副作用的,相比于类组件函数 ...

  6. Spring Cloud Feign 服务消费调用（三）

    序言 Spring Cloud Netflix的微服务都是以HTTP接口的形式暴露的,所以可以用Apache的HttpClient或Spring的RestTemplate去调用 而Feign是一个使用 ...

  7. 5种IO模型、阻塞IO和非阻塞IO、同步IO和异步IO

    POSIX 同步IO.异步IO.阻塞IO.非阻塞IO,这几个词常见于各种各样的与网络相关的文章之中,往往不同上下文中它们的意思是不一样的,以致于我在很长一段时间对此感到困惑,所以想写一篇文章整理一下. ...

  8. 【redis】redis异常-MISCONF Redis is configured to save RDB snapshots

    使用redis报错: MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persis ...

  9. ssh-agent的作用

    明明在github上配置了ssh公钥,拉代码时却报错: sign_and_send_pubkey: signing failed: agent refused operation 解决方法:在~/.z ...

  10. redux的详细介绍和使用！

    三层 视图(view)数据商店(store)reducer 流程: 用户操作视图 视图产生action 通过store转发给reducer(同时还会接收store中的数据模型 state) 由redu ...