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. java之LinkedList详细介绍

    1 LinkedList介绍 LinkedList简介 LinkedList 是一个继承于AbstractSequentialList的双向链表.它也可以被当作堆栈.队列或双端队列进行操作.Linke ...

  2. Baidu WebUploader 前端文件上传组件的使用

    简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...

  3. 算法入门:最大子序列和的四种算法(Java)

    最近再学习算法和数据结构,推荐一本书:Data structures and Algorithm analysis in Java 3rd 以下的四种算法出自本书 四种最大子序列和的算法: 问题描述 ...

  4. Java学习笔记32(集合框架六:Map接口)

    Map接口与Collection不同: Collection中的集合元素是孤立的,可理解为单身,是一个一个存进去的,称为单列集合 Map中的集合元素是成对存在的,可理解为夫妻,是一对一对存进去的,称为 ...

  5. HoloLens开发手记 - HoloLens上的应用视图 App views on HoloLens

    运行在HoloLens上的应用可能包含2种视图,分别是全息视图和2D视图.应用可以在全息视图和2D视图之间转换,这常被用于访问系统提供的接口,例如虚拟键盘.拥有至少一个全息视图的应用被归类为全息应用. ...

  6. Python——collections模块

    collections模块 collections模块在内置数据类型(dict.list.set.tuple)的基础上,还提供了几个额外的数据类型:ChainMap.Counter.deque.def ...

  7. hashmap可以用null为键值

    import java.util.HashMap; import java.util.Map; import java.util.TreeMap;   public class TestMain { ...

  8. SQL Server性能优化(14)索引碎片

    一. 外部碎片和内部碎片的概念 碎片的概念和检测,参考MSDN:https://msdn.microsoft.com/zh-cn/library/ms189858.aspx 二.对于碎片的解决办法 解 ...

  9. Jenkins持续集成学习-Windows环境进行.Net开发4

    目录 Jenkins持续集成学习-Windows环境进行.Net开发4 目录 前言 目标 Github持续集成 提交代码到Github 从Github更新代码 git上显示构建状态 自动触发构建 Gi ...

  10. FFmpeg时间戳详解

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10584910.html 1. I帧/P帧/B帧 I帧:I帧(Intra-coded pi ...