#000000   #2F0000   #600030   #460046   #28004D
  #272727   #4D0000   #820041   #5E005E   #3A006F
  #3C3C3C   #600000   #9F0050   #750075   #4B0091
  #4F4F4F   #750000   #BF0060   #930093   #5B00AE
  #5B5B5B   #930000   #D9006C   #AE00AE   #6F00D2
  #6C6C6C   #AE0000   #F00078   #D200D2   #8600FF
  #7B7B7B   #CE0000   #FF0080   #E800E8   #921AFF
  #8E8E8E   #EA0000   #FF359A   #FF00FF   #9F35FF
  #9D9D9D   #FF0000   #FF60AF   #FF44FF   #B15BFF
  #ADADAD   #FF2D2D   #FF79BC   #FF77FF   #BE77FF
  #BEBEBE   #FF5151   #FF95CA   #FF8EFF   #CA8EFF
  #d0d0d0   #ff7575   #ffaad5   #ffa6ff   #d3a4ff
  #E0E0E0   #FF9797   #FFC1E0   #FFBFFF   #DCB5FF
  #F0F0F0   #FFB5B5   #FFD9EC   #FFD0FF   #E6CAFF
  #FCFCFC   #FFD2D2   #FFECF5   #FFE6FF   #F1E1FF
  #FFFFFF   #FFECEC   #FFF7FB   #FFF7FF   #FAF4FF
  #000079   #000079   #003E3E   #006030   #006000
  #000093   #003D79   #005757   #01814A   #007500
  #0000C6   #004B97   #007979   #019858   #009100
  #0000C6   #005AB5   #009393   #01B468   #00A600
  #0000E3   #0066CC   #00AEAE   #02C874   #00BB00
  #2828FF   #0072E3   #00CACA   #02DF82   #00DB00
  #4A4AFF   #0080FF   #00E3E3   #02F78E   #00EC00
  #6A6AFF   #2894FF   #00FFFF   #1AFD9C   #28FF28
  #7D7DFF   #46A3FF   #4DFFFF   #4EFEB3   #53FF53
  #9393FF   #66B3FF   #80FFFF   #7AFEC6   #79FF79
  #AAAAFF   #84C1FF   #A6FFFF   #96FED1   #93FF93
  #B9B9FF   #97CBFF   #BBFFFF   #ADFEDC   #A6FFA6
  #CECEFF   #ACD6FF   #CAFFFF   #C1FFE4   #BBFFBB
  #DDDDFF   #C4E1FF   #D9FFFF   #D7FFEE   #CEFFCE
  #ECECFF   #D2E9FF   #ECFFFF   #E8FFF5   #DFFFDF
  #FBFBFF   #ECF5FF   #FDFFFF   #FBFFFD   #F0FFF0
  #467500   #424200   #5B4B00   #844200   #642100
  #548C00   #5B5B00   #796400   #9F5000   #842B00
  #64A600   #737300   #977C00   #BB5E00   #A23400
  #73BF00   #8C8C00   #AE8F00   #D26900   #BB3D00
  #82D900   #A6A600   #C6A300   #EA7500   #D94600
  #8CEA00   #C4C400   #D9B300   #FF8000   #F75000
  #9AFF02   #E1E100   #EAC100   #FF9224   #FF5809
  #A8FF24   #F9F900   #FFD306   #FFA042   #FF8040
  #B7FF4A   #FFFF37   #FFDC35   #FFAF60   #FF8F59
  #C2FF68   #FFFF6F   #FFE153   #FFBB77   #FF9D6F
  #CCFF80   #FFFF93   #FFE66F   #FFC78E   #FFAD86
  #D3FF93   #FFFFAA   #FFED97   #FFD1A4   #FFBD9D
  #DEFFAC   #FFFFB9   #FFF0AC   #FFDCB9   #FFCBB3
  #E8FFC4   #FFFFCE   #FFF4C1   #FFE4CA   #FFDAC8
  #EFFFD7   #FFFFDF   #FFF8D7   #FFEEDD   #FFE6D9
  #F5FFE8   #FFFFF4   #FFFCEC   #FFFAF4   #FFF3EE
  #613030   #616130   #336666   #484891   #6C3365
  #743A3A   #707038   #3D7878   #5151A2   #7E3D76
  #804040   #808040   #408080   #5A5AAD   #8F4586
  #984B4B   #949449   #4F9D9D   #7373B9   #9F4D95
  #AD5A5A   #A5A552   #5CADAD   #8080C0   #AE57A4
  #B87070   #AFAF61   #6FB7B7   #9999CC   #B766AD
  #C48888   #B9B973   #81C0C0   #A6A6D2   #C07AB8
  #CF9E9E   #C2C287   #95CACA   #B8B8DC   #CA8EC2
  #D9B3B3   #CDCD9A   #A3D1D1   #C7C7E2   #D2A2CC
  #E1C4C4   #D6D6AD   #B3D9D9   #D8D8EB   #DAB1D5
  #EBD6D6   #DEDEBE   #C4E1E1   #E6E6F2   #E2C2DE
  #F2E6E6   #E8E8D0   #D1E9E9   #F3F3FA  

#EBD3E8

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
 
 

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

 

颜色表 及 p em fr的更多相关文章

  1. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

  2. PS 颜色表大全-CMYK颜色表(2)

    CMYK颜色表 编号 C M Y K R G B 16进制值 1 0 100 100 45 139 0 22 8B0016 2 0 100 100 25 178 0 31 B2001F 3 0 100 ...

  3. [C#]生成预定义全颜色表

    生成Color类所有static预定义成员的颜色表 const long CELLS_PER_LINE = 10; const float MARGIN = 12; const float CELL_ ...

  4. HTML RGB 颜色表 16进制表 颜色对应表

    HTML RGB 颜色表 16进制表 颜色对应表  16 常用颜色表(颜色 + RGB + 名字): Color Value Name   Color Value Name   #00FFFF aqu ...

  5. RGB与HSV之间的转换公式及颜色表

    RGB & HSV 英文全称 RGB - Red, Green, Blue HSV - Hue, Saturation, Value HSV --> RGB 转换公式 HSV --> ...

  6. Android开发:setAlpha()方法和常用RGB颜色表----颜色, r g b分量数值(int), 16进制表示 一一对应

    杂家前文Android颜色对照表只有颜色和十六进制,有时候需要设置r g b分量的int值,如paint.setARGB(255, 127, 255, 212);就需要自己计算下分量的各个值.这里提供 ...

  7. VOC Segmentation GT图像颜色表生成分析

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52185581 PASCAL VOC图像 ...

  8. GeoTiff如何存储颜色表的研究

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在一次偶然的机会中得知tiff图像时可以存诸颜色表的,心想以后用GeoTiff来保存图像分类图像就十分方便了.于是研究 ...

  9. CSS中颜色表示方法及颜色表

    一:直接用颜色的英文名表示 二:RGB(x,y,z)函数表示,x.y.z.分别是红色.绿色.蓝色的值,x,y,z∈[0,225],亦可用百分比表示:对比rgba(x,y,z,a)中a是alpha通道设 ...

随机推荐

  1. linux准备工具VMware以及ubuntu

    链接:https://pan.baidu.com/s/1j7DZCmzOcC2rPAciHtZgkA 密码:et5s

  2. jsp+postgresql学习笔记(1)用户登录与注册

    前期准备: tomcat的安装与配置(略) jdk的安装与配置(略) eclipse软件安装与配置(略) webstrom软件或IDEA的安装与配置(大概用了IDEA就不需要eclipse了,但是怎么 ...

  3. tcp config

    $ sudo sysctl net.ipv4.tcp_reordering=1 $ sudo sysctl net.ipv4.tcp_thin_linear_timeouts=1 $ sudo sys ...

  4. java三种注释以及参数涵义(转)

    原文地址:https://www.cnblogs.com/miys/p/4bf714ce33068dcf9ac6526309c9b5e6.html 单行注释:// 注释内容 多行注释:/*... 注释 ...

  5. SetForegroundWindow Win32-API not always works on Windows-7

    BIG NOTE After messing with this API for the last 2 months, the solution/s below are all not stable ...

  6. js if判断示例

    ){ ){ console.log("%0 pass") }else{ $(,v,function() { fla=; }); } }){ ){ console.log(" ...

  7. winform使用log4.net

    因为我最近负责的Winform项目,好多都用到了这个log4net的日志功能,开发程序对数据一般都要求做到雁过留痕,所以日志对于我们程序员是不可或缺.因此我把对log4net的使用做一个记录总结,以便 ...

  8. 【安卓进阶】LiveData

    最近参与到后端的工作中,虽然以前在工作中使用过PHP,但是这次使用的是Java,开发思路和方式有所不同.后端开发中,做接口也是需要处理大量的业务逻辑关系,同时一些事务之类的技术因素也要考虑好,在架设项 ...

  9. WPF界面假死

    首先要检查那些滥用 Timer.Dispacher Timer 或者滥用什么“线程+死循环+阻塞”轮询的代码. 这种是编程大忌,有些人不会设计事件驱动程序,而是滥用轮询. 若是:触发事件后的假死,搜W ...

  10. 铁大Facebook轻量化界面NABCD

    界面轻量化: N:满足了用户更快速.更直接.更方便寻求自己所要信息的需求,不被复杂界面以及各种广告所困扰. A:我们将会用Bootstrap工具包开发前端界面,Bootstrap是基于jQuery框架 ...