em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.5em, 1em,2em等,通常1em=16px。

  rem(root em,根em):是CSS3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素就可以成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容,对于不兼容的浏览器写一个绝对单位的声明就可以了。

  fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

 px全称Pixel,译:像素。它相对长度单位,像素 px 是相对于显示器屏幕分辨率而言的

  px,em,rem的区别在哪?

  Px是一个绝对字体大小,em则是基于基数(比如:1.5em)来计算出来的相对字体大小。这个基数是需要乘以当前对象从其父级遗传字体大小。

  1.5em = 父级字体大小 * 1.5 = ?

  不过,这有个问题就是在css中想要知道当前元素的字体大小所遗传的是哪个父级元素的字号。因此,rem的出现就很好的解决了这个问题。rem是基于根节点(比如html)的字体大小进行计算的。

   1.5rem = 默认字体大小 (比如: 16px) * 1.5 = 24px

  这个默认字体大小是依据你网站当前访问时所使用的浏览器或者其他设备来决定的,对于桌面浏览器默认是16px的字体大小。然后你现在要转换当前元素的字体大小为rem的时候你就可以这样做:

   28px = 28/16 = 1.75rem

  为了更方便的进行计算转换,你可以把默认字体大小设置成62.5%或者是10px,这个时候你要计算当前元素字体大小的时候,你就可以这样:

  28px = 28/10 = 2.8rem
  常用颜色对照表地址:http://tool.oschina.net/commons?type=3
  我经常用浏览器自带的颜色表,win10自带的的3D画图,可以查看rgb和16进制
  

第三次web作业的更多相关文章

  1. 简单web作业---书籍介绍的相关网页编写

    老师布置的web作业,我做了3个页面,其中有利用老师的css代码! 我有添加背景音乐,下面的是主界面的代码. <!DOCTYPE html> <html> <head&g ...

  2. 2016福州大学软件工程第三次个人作业-K米软件产品评测

    K米软件测评个人作业结果统计如下: 评分标准: 按照栋哥布置的第三次个人作业--K米测评制定评分标准如下: 第一部分:调研.评测 下载并使用,描述最简单直观的个人第一次上手体验. 0.5 按照描述的b ...

  3. 第三次个人作业——关于K米(Andorid)的案例分析

    第三次个人作业--关于K米(Andorid)的案例分析 1.K米简介 官方网址:http://www.ktvme.com/ 2.评测 2.1.上手体验 带着找bug的心态,兴致勃勃地开始体验 K米.打 ...

  4. 常见的三种Web服务架构

    常见的三种Web服务架构 转自http://www.cnblogs.com/bvbook/archive/2008/12/24/1360942.html 相互竞争的服务架构 The Competing ...

  5. 糟糠之妻下堂,娇俏公主上位——更换宝马三系座椅作业 - 切诺基 Jeep家族 越野e族论坛 越野/SUV/旅行/赛事/改装/互动中心

    糟糠之妻下堂,娇俏公主上位--更换宝马三系座椅作业 - 切诺基 Jeep家族 越野e族论坛 越野/SUV/旅行/赛事/改装/互动中心 舒适性没有想象中好.我觉得理想的座椅,应该象是在你最疲倦的时候,把 ...

  6. 【作业】HansBug的前三次OO作业分析与小结

    OO课程目前已经进行了三次的作业,容我在本文中做一点微小的工作. 第一次作业 第一次作业由于难度不大,所以笔者程序实际上写的也比较随意一些.(点击就送指导书~) 类图 程序的大致结构如下: 代码分析 ...

  7. Java进阶(三十一) Web服务调用

    Java进阶(三十一) Web服务调用 前言 有朋友问了一个问题:如何调用已知的音乐服务接口,服务文档如下: https://www.evernote.com/shard/s744/sh/c37cd5 ...

  8. CSAPP深入理解计算机系统(第二版)第三章家庭作业答案

    <深入理解计算机系统(第二版)>CSAPP 第三章 家庭作业 这一章介绍了AT&T的汇编指令 比较重要 本人完成了<深入理解计算机系统(第二版)>(以下简称CSAPP) ...

  9. 17秋 SDN课程 第三次上机作业

    SDN 第三次上机作业 1.创建拓扑 2.利用OVS命令下发流表,实现vlan功能 3.利用OVS命令查看流表 s1: s2: 4.验证性测试 5.Wireshark 抓包验证

随机推荐

  1. Delphi - TDateTimePicker使用注意问题

    TDateTimePicker使用时候,如果想获取到修改后的值,必须注Kind和time属性必须对应! 1,时间设置: treatmentTime1DTPicker.Kind := dtkTime; ...

  2. Servlet案例5:用户登录失败信息回显

    登录失败信息回显不会的新的一个页面,而是显示在登录页面 一种方法是: 登录页面表单中每个字段后添加<span>标签写入失败信息,利用ajax技术 通过改变<span>标签的di ...

  3. Swift5 语言指南(十四) 下标

    类,结构和枚举可以定义下标,下标是用于访问集合,列表或序列的成员元素的快捷方式.您可以使用下标按索引设置和检索值,而无需单独的设置和检索方法.例如,您可以访问在元素Array实例作为someArray ...

  4. SQL-1--语句分类

  5. java中微信统一下单采坑(app微信支付)

    app支付前java后台统一下单文档:https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_1 微信支付接口签名校验工具:https ...

  6. python 特定份数的数据概率统计(原创)

    使用numpy模块中的histogram函数模块 Histogram(a,bins=10,range=None,normed=False,weights=None)其中, a是保存待统计数据的数组, ...

  7. canvas图片上传相关学习

    今天主要是研究了canvas的关于图片上传的相关知识, context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);  

  8. PID file /run/zabbix/zabbix_server.pid not readable (yet?) after start. 报错解决

    报错如下: [root@localhost zabbix]# systemctl start zabbix-server Job for zabbix-server.service failed be ...

  9. spring cloud(断路器——初学五)

    Feign使用Hystrix 因为feign已经依赖了hystrix,所以可以直接使用,无需添加再次添加依赖. 1.使用@FeignClient注解中的fallback属性指定回调类 package ...

  10. [教程向]__在IDEA中使用git+github实现代码的版本控制

    前言 在前面,我们对git与github有了一个简单的了解,了解到版本控制的必要性,和github远程代码仓库的一些作用.那么我们如何在IDEA重实现代码的版本控制呢. 前提 首先你要安装有git,注 ...