CSS知识点速记（二）

CSS中的长度单位：

• 像素屏幕（显示器）实际上是由一个一个的小点点构成的，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样
• 百分比也可以将属性值设置为相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素的改变而改变
• emem是相对于元素的字体大小来计算的1em = 1font-sizeem会根据字体大小的改变而改变
• remrem是相对于根元素的字体大小来计算

CSS中的颜色单位：

• 在CSS中可以直接使用颜色名来设置各种颜色，比如：red、orange、yellow、blue、green … …，但是在css中直接使用颜色名是非常的不方便
• RGB值：RGB通过三种颜色的不同浓度来调配出不同的颜色R red，G green ，B blue每一种颜色的范围在 0 - 255 (0% - 100%) 之间语法：RGB(红色,绿色,蓝色)
• RGBA:就是在rgb的基础上增加了一个a表示不透明度需要四个值，前三个和rgb一样，第四个表示不透明度，1表示完全不透明 0表示完全透明 .5半透明
• 十六进制的RGB值：语法：#红色绿色蓝色颜色浓度通过 00-ff如果颜色两位两位重复可以进行简写 #aabbcc --> #abc
• HSL值 HSLA值H 色相(0 - 360)S 饱和度，颜色的浓度 0% - 100%L 亮度，颜色的亮度 0% - 100%

文档流（normal flow）

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

• 对于我们来元素主要有两个状态在文档流中不在文档流中（脱离文档流）

• 元素在文档流中有什么特点：

• • 块元素块元素会在页面中独占一行(自上向下垂直排列)默认宽度是父元素的全部（会把父元素撑满）默认高度是被内容撑开（子元素）
  • 行内元素行内元素不会独占页面的一行，只占自身的大小行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）行内元素的默认宽度和高度都是被内容撑开

关注公众号：哥伦布日记，即可获得更多干货！