CSS---RGBA和position属性解释
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属性解释的更多相关文章
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- 【CSS学习】--- position属性
一.前言 1.HTML中的三种布局方式: 标准流(普通流):网页中默认的布局方式,即顺序布局 浮动:float 定位:position 2.position属性的作用方式: 给position属性设置 ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
随机推荐
- Spring Boot图书管理系统项目实战-6.图书管理
导航: pre: 5.读者管理 next:7.借阅图书 只挑重点的讲,具体的请看项目源码. 1.项目源码 需要源码的朋友,请捐赠任意金额后留下邮箱发送:) 2.页面设计 2.1 book.html ...
- Java I/O 教程(八) Writer和Reader
Java Writer Writer是一个用于写字符流的抽象类.其子类必须实现write(char[], int, int), flush(), 和 close()方法. 类定义 public abs ...
- sentry 在加载模块时闪退
这是一个很久之前的问题了,今天记录一下,以便遇到同样问题的同学能够看到此文章 崩溃环境: 目前仅收到 windows 7 的部分用户反馈,在程序启动时发生闪退 问题分析: 查看用户提供的日志,可以看见 ...
- 开源:Taurus.DistributedLock 分布式锁框架,支持 .Net 和 .Net Core 双系列版本
前言: 在经过漫长的技术沉淀,终于又为 .Net 及 .Net Core 的微服务系列框架贡献当中的一个重要组件. Taurus.DistributedLock is a distributed lo ...
- django执行迁移文件报错struct.error: unpack requires a buffer of 4 bytes
问题: 我使用的版本说明 django:2.2版本 djangorestframework:3.11版本 python3.6版本 解决 查了下资料,没有很详细的说明,我是因为需要使用继承django自 ...
- java+文件读写实现的图书管理系统
一功能 管理员具有的功能 1.增加图书.删除图书.修改图书信息.查询图书.图书列表 2.借阅者管理,通过借阅的书号查询图书信息 3.个人信息修改 读者功能 1.图书借阅 2.图书归还 3.图书查询 4 ...
- 本机复制的内容粘贴不到VMware虚拟机里面的解决办法
分析 VMware正确安装完linux虚拟机之后,这里以Ubuntu为例,如果你使用的默认配置,正常情况下就可以复制.粘贴和拖拽内容的,双方向都是支持的.如果不能复制和拖拽一般是vmware tool ...
- 【LeetCode二叉树#18】修剪二叉搜索树(涉及重构二叉树与递归回溯)
修剪二叉搜索树 力扣题目链接(opens new window) 给定一个二叉搜索树,同时给定最小边界L 和最大边界 R.通过修剪二叉搜索树,使得所有节点的值在[L, R]中 (R>=L) .你 ...
- DataGear 自定义数据可视化看板的图表主题
DataGear 看板的 dg-chart-theme 属性,提供了简单且强大的自定义图表主题功能. 通常,只需要设置其color.backgroundColor.actualBackgroundCo ...
- 【Azure 微服务】面对Service Fabric中节点状态不正常(Disabling/Warning/RemoveNode)的几种尝试解决方案
问题描述 发现 Service Fabric 的节点状态异常,如出现 Disabling, Warning,或者 RemoveNode的情况,并且持续很长时间都没有变化(2小时以上).如何来缓解这种问 ...