CSS中的长度单位及颜色表示

长度单位:

  1. px:像素,绝对单位
  2. em:相对单位,如果用于font-size属性本身,则是相对于父元素的font-size。若用于其他属性(width,height),则是相对于本身元素的font-size。所有未经调整的浏览器都符合: 1em=16px。
  3. rem:相对字体长度单位,只相对根元素即html元素字体大小。
  4. fr:自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

颜色表示:

  1. 十六进制表示法:可表示为:#RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。例如:#0000FF值呈现为蓝色,因为蓝色的组成设置为最高值(FF)而其他设置为0。也可表示为:#RGB,值也必须为0到f之间,例如:#00f表示为蓝色。
  2. rgb表示法:表示法为:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。例如:rgb(0,0,255),表示为蓝色,值越高,颜色混合占比越多。
  3. rgba表示法:表示法为:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。
  4. hsl色相表示法:表示法为:HSL(色调,饱和度,明度)。色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。
  5. hsla色相表示法:表示法为:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数

CSS中的长度单位及颜色表示的更多相关文章

  1. 深入理解CSS中的长度单位

    前面的话 本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识 绝对长度单位 绝对长度单位代表一个物理测量 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度 ...

  2. CSS中各种长度单位总结

    在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; bord ...

  3. [翻译]解读CSS中的长度单位

    测量,在WEB设计上是非常重要的.在CSS中有至少10种不同的测量单位.每种单位都有其独特的作用,使用它们,可以使页面,在各种设备上,很好的工作.一旦你熟悉了所有这些单位,你可以更准确地设定元素的大小 ...

  4. 简要的谈一谈我对CSS中长度单位的理解

    CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...

  5. CSS 中的rem,em,vh,vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  6. CSS中表示大小的单位

    以下是DIVCSS5为大家总结网页中常见html单位介绍,在css+div布局中长度单位介绍篇. 其实css中的长度单位一共有8个,分别是px,em,pt,ex,pc,in,mm,cm: px:像素( ...

  7. CSS中rem、em的区别

    引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...

  8. js函数实现转换css中常用的颜色编码

    //转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...

  9. 3.css中的颜色

    css中颜色的设置形式主要有三种方式:颜色名称.十六进制代码和十进制代码. 在古老的 HTML4 时,颜色名称只有 16 种. 颜色名称 十六进制代码 十进制代码 含义  black  #000000 ...

随机推荐

  1. Android移植学习笔记

    1.一头雾水不知道用什么编译环境,不知道用什么下载软件 编译软件:Ubuntu12.04(编译主机系统),JDK(Java) 下载软件: 模拟器: qemu

  2. max3232

    max3232采用专有低压差发送器输出级,利用双电荷泵在3.0V至5.5V电源供电时能够实现真正的RS-232性能,器件仅需四个0.1uF的外部小尺寸电荷泵电容.max3232确保在120kbps数据 ...

  3. UVa 10891 Game of Sum - 动态规划

    因为数的总和一定,所以用一个人得分越高,那么另一个人的得分越低. 用$dp[i][j]$表示从$[i, j]$开始游戏,先手能够取得的最高分. 转移通过枚举取的数的个数$k$来转移.因为你希望先手得分 ...

  4. C++11 正则表达式——实例系统(转载)

    一.用正则表达式判断邮箱格式是否正确 1 #include <regex> #include <iostream> #include <string> bool i ...

  5. python3+pyqt5 +eric5安装配置

    一.大纲内容: 1.预备PC环境: 2.预备安装程序: 2.1.下载Python3.2 2.2.下载PyQt4 2.3.下载Eric5 3.安装配置步骤: 3.1.安装Pyhon3.2 3.2.安装P ...

  6. Spring Boot详细学习地址转载

    阿里中间件牛人,学习榜样,源码分析: https://fangjian0423.github.io/ 基础.详细.全面的教程: https://gitee.com/roncoocom/spring-b ...

  7. 使用Apache Kylin搭建企业级开源大数据分析平台

    转:http://www.thebigdata.cn/JieJueFangAn/30143.html 我先做一个简单介绍我叫史少锋,我曾经在IBM.eBay做过大数据.云架构的开发,现在是Kylige ...

  8. 【Python】【有趣的模块】【Bobo】

    [python web框架之 bobo的安装配置] [Mac] 我的Mac环境,python3.5 1. 安装bobo  :   >>> pip3 install bobo 2. 配 ...

  9. 对Tomcat启动或运行时,项目对jar包依赖路径的一些粗浅认知

    Tomcat在运行webapp项目的时候,需要各种依赖jar包.它会从2个地方去找这些包 1.Tomcat自己的lib目录中 2.webapp目录下,webapps\{项目}\WEB-INF\lib ...

  10. Python中浮点数精度处理

    Python中,浮点数运算,经常会碰到如下情况: 出现上面的情况,主要还是因浮点数在计算机中实际是以二进制保存的,有些数不精确.比如说: 0.1是十进制,转化为二进制后它是个无限循环的数:0.0001 ...