10款RGB素选择器RGB/10/25RGB

风格继承：

我们为一个元素设置的样式也会应用到它的后代元素上，但并不是所有的样式都会被继承，比如：背景相关、布局相关……  

选择器优先级：

当我们通过不同的选择器选择同一个元素，为同一个样式选择不同的值时，就会发生样式冲突。

选择器的权重（从高到低）：

内联样式：1,0,0,0；

id 选择器：0,1,0,0；

类和伪类选择器：0,0,1,0；

元素选择器：0,0,0,1；

通配符选择器：0,0,0,0；

继承样式：无优先级

比较优先级时，需要将所有选择器的优先级相加计算，最后优先显示优先级高的，分组后的选择器分别计算。选择器的累积不会超过最大数量级，也就是说无论class选择器多高，都不会超过id选择器。如果计算后优先级相等，则先使用较低的样式（选择器越具体，优先级越高）。

你可以加 ”！” 在样式之后，该样式将获得最高优先级，甚至超过内联样式。但在实际开发中谨慎使用！

长度单位：

像素px，相同的像素在不同的设备上显示不同

%，可以将属性值设置为父元素属性的百分比

em，相对于元素的字体大小计算，1em=1font-size

rem，相对于根元素 (html) 字体大小计算

颜色单位：

可以使用颜色名称或 RGB 值在 CSS 中设置颜色。

RGB：红、绿、蓝；每种颜色范围为 0-255 (0%-100%)，语法：RGB(0,0,255) 或 RGB(10%,0%, 255%)

RGBA：在 RGB 中添加 A 表示不透明度，1 表示不透明，0 表示透明，0.5 表示半透明，语法：RGB(0,0,255,.5)

十六进制RGB值：语法#，如果是#格式css设置input背景色，可以简写为#abc

HSL: 色调(0-360), 饱和度(0%-100%), 亮度(0%-100%); 语法: HSL(30, 20%, 30%)

HSLA：将 A 添加到 HSL 以获得不透明度

文件流程：

网页是一个多层结构，可以通过 CSS 为每一层设置样式。作为用户，只能看到顶层。在这些层中，最底层称为文档流。文档流是网页的基础。我们创建的元素默认排列在文档流中。

对我们来说，一个元素有两个主要状态：

1.在文档流中：

块元素：页面中的单行（从上到下垂直排列）；默认宽度是填充父元素，默认高度是被内容（子元素）拉伸

内联元素：不占一行（横向从左到右），只占自己的大小，如果一行放不下，切换到第二行继续从左到右排列（符合书写习惯）；默认宽度和高度是内容传播

2.不在文档流中（文档流外）

盒子模式：

CSS 将页面中的所有元素设置为一个矩形框，页面的布局相当于放置了一个框。每个框由以下部分组成：内容区域（）css设置input背景色，边框（），填充（），边距（）。

	
	
	
		.box{
			/*设置内容区的高度、宽度、背景颜色*/
			height: 200px;
			width: 200px;
			background-color: #bfa;
			/*————————————————————————————————————————*/
			/*设置边框的宽度（一般默认三个像素）、颜色、样式*/
			border-width: 10px 20px 30px 40px;
			/*四个值：分别设置上、右、下、左的宽度
			  三个值：分别设置上、左右、下的宽度
			  两个值：分别设置上下、左右的宽度
			  一个值：设置上下左右的宽度
			  除了border-width外，还有一组：border-xx-width用来单独指定某一个边的宽度
			  xx:top、right、bottom、left*/

			border-color: skyblue greenyellow yellowgreen;
			/*可以指定四个边框的颜色，与border-width类似,如果省略不写则自动使color的颜色值*/
			color: red;
			border-style: solid double;
			/*可以指定四个边框的样式，与border-width类似，值有：
			  solid实线、dotted点状虚线、dashed虚线、double双线
			  默认值是none，无边框*/
			/*border:solid 10px orange;  
			  这个是border的简写属性，可以同时设置边框的所有相关样式，并且没有顺序要求
			  除此之外还有四个border-xx，用法与之相同
			  xx:top、right、bottom、left*/
			/*————————————————————————————————————————*/
			/*内边距只能设置大小，不能设置颜色和样式等
			  内边距的设置会影响盒子的大小，内容区的背景颜色会延伸到内边距上
			  内容区、内边距、边框加在一起共同构成盒子大小*/
			  padding-left: 50px;
			/*padding-xx
			  xx:top、right、bottom、left

			  简写属性padding:;*/
			/*————————————————————————————————————————*/
			/*外边距不会影响可见框的大小，但会影响盒子的位置和实际占用空间
			  margin-xx
			  xx:top(正值,元素向下移动)
			     right(默认情况设置不会产生任何效果)
			     bottom(正值,下侧元素向下移动)
			     left(正值,元素向右移动)
			  简写属性margin:;
			  如果设置负值，则元素会向相反方向移动
			  元素在页面中自左向右排列，默认情况下如果我们设置的左和上外边距会移动元素自身，右和下外边距会移动其他元素*/
			  margin-top: 60px;
			  margin-bottom: -10px;
		}
		.inner{
			width: 100%;
			height: 100%;
			background-color: pink;

		}
		.box2{
			background-color: yellow;
			width: 100px;
			height: 100px;
			margin-left: 80px;
		}
	


	

		
		

	
	

（作者观看的学习视频：哔哩哔哩还是硅谷）