CSS中的长度单位及颜色表示
CSS中的长度单位及颜色表示
长度单位:
- px:像素,绝对单位
- em:相对单位,如果用于font-size属性本身,则是相对于父元素的font-size。若用于其他属性(width,height),则是相对于本身元素的font-size。所有未经调整的浏览器都符合: 1em=16px。
- rem:相对字体长度单位,只相对根元素即html元素字体大小。
- fr:自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。
颜色表示:
- 十六进制表示法:可表示为:#RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。例如:#0000FF值呈现为蓝色,因为蓝色的组成设置为最高值(FF)而其他设置为0。也可表示为:#RGB,值也必须为0到f之间,例如:#00f表示为蓝色。
- rgb表示法:表示法为:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。例如:rgb(0,0,255),表示为蓝色,值越高,颜色混合占比越多。
- rgba表示法:表示法为:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。
- hsl色相表示法:表示法为:HSL(色调,饱和度,明度)。色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。
- hsla色相表示法:表示法为:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数
CSS中的长度单位及颜色表示的更多相关文章
- 深入理解CSS中的长度单位
前面的话 本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识 绝对长度单位 绝对长度单位代表一个物理测量 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度 ...
- CSS中各种长度单位总结
在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; bord ...
- [翻译]解读CSS中的长度单位
测量,在WEB设计上是非常重要的.在CSS中有至少10种不同的测量单位.每种单位都有其独特的作用,使用它们,可以使页面,在各种设备上,很好的工作.一旦你熟悉了所有这些单位,你可以更准确地设定元素的大小 ...
- 简要的谈一谈我对CSS中长度单位的理解
CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...
- CSS 中的rem,em,vh,vw一次说清楚
关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...
- CSS中表示大小的单位
以下是DIVCSS5为大家总结网页中常见html单位介绍,在css+div布局中长度单位介绍篇. 其实css中的长度单位一共有8个,分别是px,em,pt,ex,pc,in,mm,cm: px:像素( ...
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- js函数实现转换css中常用的颜色编码
//转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...
- 3.css中的颜色
css中颜色的设置形式主要有三种方式:颜色名称.十六进制代码和十进制代码. 在古老的 HTML4 时,颜色名称只有 16 种. 颜色名称 十六进制代码 十进制代码 含义 black #000000 ...
随机推荐
- 【angular2+typeScript+ng-zorro】Carousel 走马灯的左右方向控件实现
ng-zorro Carousel 走马灯的左右方向控件实现 ng-zorro框架的走马灯本身还没有左右方向控件的实现,作者只是在文档中(0.6x)中曝出几个方法接口,如图: 实现: 在根compon ...
- MacBook PRO蓝牙无法搜索设备
背景 经常把MacBook合上盖子就塞进包里,用时打开盖子就继续操作,偶尔会出现刚刚还在用的罗技蓝牙鼠标,重新打开笔记本后就连接不上了,而且也无法搜索到周边的蓝牙设备. 解决方案 快捷键:Option ...
- BZOJ3942: [Usaco2015 Feb]Censoring 栈+KMP
Description Farmer John has purchased a subscription to Good Hooveskeeping magazine for his cows, so ...
- Unity3D学习笔记(二十一):InputFiled、Dropdown、Scroll Rect、Mask
InputFiled组件(输入框) Text Component(显示内容):显示输入内容的Text的组件 Text(输入内容):输入的文本内容 Character Limit:字符数量限值,0是无限 ...
- Redis的两种连接方式
1.简单连接 import redis conn = redis.Redis(host=) conn.set('foo', 'Bar') print(conn.get('foo')) a = inpu ...
- python ros 回充demo
#!/usr/bin/env python #coding=utf- import rospy from std_msgs.msg import String i= def talker(): glo ...
- Jmeter 测试API接口 查看接口的幂等问题
背景介绍: 比如一个注册接口,要求填入的手机号与DB中已有的不能重复, 如果手机号码重复,则此次注册失败,不会新增会员数据: 如果不重复,则注册成功(忽略其他因素). 但是用20个并发,同样的请求,请 ...
- Python day16 tag式整体退出技巧
在写一些服务器时,往往会多层嵌套循环,可利用tag变量实现整体退出功能,代码: tag=True while tag: print('level1') choice=input('level1> ...
- [STL][C++]LIST
参考:http://blog.csdn.net/whz_zb/article/details/6831817 list是双向循环链表,,每一个元素都知道前面一个元素和后面一个元素.在STL中,list ...
- meta 标签
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> & ...