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. 【牛客网71E】 组一组(差分约束,拆位)

    传送门 NowCoder Solution 考虑一下看到这种区间或与区间与的关系,拆一下位. 令\(s_i\)表示前缀和,则: 那么如果现在考虑到了第\(i\)为,有如下4种可能: \(opt=1\) ...

  2. rabbitMq 初步

    RabbitMQ的工作原理 它的基本结构 组成部分说明如下: Broker:消息队列服务进程,此进程包括两个部分:Exchange和Queue. Exchange:消息队列交换机,按一定的规则将消息路 ...

  3. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  4. USB协议介绍

    这里有必要先说清楚一下USB2.0规范的由来.USB2.0技术规范是有由Compaq.Hewlett Packard.Intel.Lucent.Microsoft.NEC.Philips共同制定.发布 ...

  5. jvm-class文件简介

    jvm全称 java virtual machine (java虚拟机),也就是在计算机上再虚拟一个计算机,它存在于计算机内存中并运行在操作系统之上的. javap -v class文件名 > ...

  6. Thread-方法以及wait、notify简介

    Thread.sleep()1.静态方法是定义在Thread类中.2.Thread.sleep()方法用来暂停当前执行的线程,将CPU使用权释放给线程调度器,但不释放锁(也就是说如果有synchron ...

  7. ArrayList的实现原理

    ArrayList的线性复杂度是1.想确定一个数据,直接通过索引进行访问.实际上这个过程和数组是非常相似的.ArrayList在整个使用过程中,如果想要高效操作,最好设置一个数组的大小.在个数固定的情 ...

  8. JAVA代理分析

    JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类 ...

  9. underscore.js源码解析【集合】

    // Collection Functions // -------------------- // The cornerstone, an `each` implementation, aka `f ...

  10. 《Kubernetes权威指南》——网络原理

    1 Kubernetes网络模型 基本原则:每个Pod都拥有一个独立IP,而且假定所有Pod都在一个可以直接连通的.扁平的网络空间中. 基于基本原则,用户不需要额外考虑如何建立Pod之间的连接,也不需 ...