rgb与rgba的含义

RGB 是代表Red(红色) 、Green(绿色)、 Blue(蓝色)三个单词的缩写。

RGBA 颜色值是 RGB 颜色值的扩展,添加了一个 alpha 通道, 它规定了对象的不透明度。

1、 基本语法:
R:红色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
G:绿色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
B:蓝色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
A:透明度。取值0~1之间,不可为负值

rgb的书写格式:rgb(90,50,25);

其中第一个数字(90)表示Red 颜色(红色值),第二个数字(50)表示Green 颜色(绿色值),

第三个数字(25)表示Blue 颜色(蓝色值)。数字越大(不超过255)则表示其对应的颜色加的越多。

rgba的书写格式:rgba(90,50,25,0.5);

从上面我们可以得到 RGBA 颜色值是 RGB 颜色值的扩展,添加了一个 alpha 通道,

它规定了对象的不透明度。

前面三个数值跟 rgb表示的是一样的,a 的值为0~1之间的值,0表示透明色,1表示不透明,

0.5表示每个(R、G、B)颜色50%的透明度,

也就是每个颜色半透明状态。这里的a还可以简写成 .5,这里只要是有小数点的透明度,都可以这样简写。


先放上原文链接:https://blog.csdn.net/mybelief321/article/details/50211801

一、body{margin: 0; padding: 0;}

这句话的含义是:浏览器默认情况下,<body>的宽度要与<html>宽度小,所以需要这句话来消除边距。

二、position:relative

首先,看一下官方对position的解释:position这个属性定义元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,

而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。看不懂?那就先不看。

再来理解一下“文档流”“正常流”,

百度百科是这样解释“文档流”:将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流(自己的理解是从头到尾按照文档的顺序,

该在什么位置就在什么位置,也可以按照上面的意思理解,自上而下,自左到右的顺序)。

咱们的HTML的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)不独占一行。

简言之:相对于自身默认的位置进行偏移。

三、position:absolute

absolute官方解释为“生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位”。

首先认识一下static,static是position的默认值,它表示没有定位,元素出现在正常的流中。

如果要使绝对定位absolute生效,必须指定left、right、top和bottom属性中的至少一个!

CSS---RGBA和position属性解释的更多相关文章

  1. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  2. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  3. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

  4. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  5. css中关于position属性的探究(原创)

    关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记.   首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...

  6. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  7. 对CSS中的Position属性的一些深入探讨

    转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...

  8. 浅谈css中的position属性

    我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...

  9. 【CSS学习】--- position属性

    一.前言 1.HTML中的三种布局方式: 标准流(普通流):网页中默认的布局方式,即顺序布局 浮动:float 定位:position 2.position属性的作用方式: 给position属性设置 ...

  10. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

随机推荐

  1. ZYNQ 裸机模式下修改默认uart端口

    ## 背景 调试ZYNQ 裸机code, 调用 printf()后在UART端口无法看到打印信息输出,查看原理图后发现,板子用的UART 1作为默认串口调试接口,UART 0分配给了RS485使用,因 ...

  2. 【Azure 存储服务】关于中国区Azure Storage Account 存储账号服务误删除后的恢复问题

    问题描述 在Azure上,如果需要恢复之前删除的存储账户(Storage Account), 有什么办法呢? 问题解答 Azure 现在推出了自主恢复已删除的存储账号的功能,具体步骤如下: 第一步: ...

  3. 【Azure 应用服务】App Service 的.NET Version选择为.NET6,是否可以同时支持运行ASP.NET V4.8的应用呢?

    问题描述 App Service 的.NET Version选择为.NET6,是否可以同时支持运行ASP.NET V4.8的应用呢? 问题解答 答案是可以的,Azure App Service .NE ...

  4. 浅入ABP(2):添加基础集成服务

    浅入ABP(2):添加基础集成服务 版权护体作者:痴者工良,微信公众号转载文章需要 <NCC开源社区>同意. 目录 浅入ABP(2):添加基础集成服务 定义一个特性标记 全局统一消息格式 ...

  5. MVVM框架模式

    MVC框架模式 MVP框架模式 MVVM框架模式 MVVM模式即: 1.Model:数据层.网络数据操作,file文件操作,本地数据库操作: 2.View:视图层.布局加载,ui交互. 3.ViewM ...

  6. opencv库图像基础3直方图-python

    opencv库图像基础3直方图-python 直方图是什么 OpenCV 中的直方图是图像中像素值分布情况的统计表示.它是图像空间域内像素值分布的图形表示,以便更好地理解颜色分布. 灰度直方图是图像中 ...

  7. SpringCloud Nacos

    1.Nacos简介 SpringCloud Alibaba 由来: 因为原先Spring Cloud 的许多组件都是对Netflix 公司的各种框架进行封装, 然后因为Netflix公司对后续更新的各 ...

  8. php本地上传文件类

    /** * Class UploadFile * @author fengzi */ class UploadFile { public $error = array(); //上传前的error信息 ...

  9. WPF --- 重写圆角DataGrid样式

    引言 因要符合UI设计, 需要一个圆角的 DataGrid 样式,其需要一个,所以需要重写DataGrid的样式, 代码 具体样式代码如下: <ResourceDictionary xmlns= ...

  10. 第12章_MySQL数据类型精讲

    第12章_MySQL数据类型精讲 讲师:尚硅谷-宋红康(江湖人称:康师傅) 官网:http://www.atguigu.com 1. MySQL中的数据类型 类型 类型举例 整数类型 TINYINT. ...