css基础学习（二）

1 样式的继承

样式的继承发生在祖先和后代元素之间。

将通用的样式统一设置到共同的祖先元素上。

注意：背景相关的，布局相关等这些样式都不会被继承

2 选择器的权重

当通过不同选择器选中相同元素，为相同的样式设置不同的值，此时就发生了样式的冲突。

2.1 选择器的权重

• 内联样式 1，0，0，0
• id选择器 0，1，0，0
• 类和伪类选择器 0，0，1，0
• 元素选择器 0，0，0，1
• 通配选择器 0，0，0，0
• 继承选择器 没有优先级

2.2 比较优先级

1. 比较优先级时，需要将所有选择器进行相加计算，最后优先级越高，则越优先显示（分组选择器时单独计算的）

2. 选择器累加不会超过最大数量级，类选择器不会超过id选择器

3. 如果优先级计算后，则优先使用靠下的样式

4. 可以在某一个样式后边加！important，则此时该样式获得最高的优先级

3 长度

3.1 像素

屏幕实际上由一个个像素构成（小方格）

同样200px在不同设备显示效果不一样，像素大小不一样。

3.2 百分比

可以设置属性相对于父元素属性百分比

设置百分比可以使子元素随着父元素改变而改变

3.3 em

是相对于元素的字体大小来计算

1em = 1 font-size

字体默认是16像素，10em = 160em

3.4 rem

rem相对于根元素的字体来计算

4 颜色单位

• 在css中直接使用颜色名来设置各种颜色，例如：red、orange、yellow、blue、green

• RGB值，根据不同浓度来调配出不同的颜色，每一种颜色范围在0-255.（0% - 100%）语法：rgb(红色，绿色，蓝色)

• RGBA值，a表示不透明度，1完全不透明，0表示完全透明

• 十六进制的RGB值，语法：#红色绿色蓝色，00-ff，例如#ff0000，可以简写#f00

• HSL值 HSLA值，H 色相（0-360）， S 饱和度（浓度0%-100%）， L 亮度（浓度0%-100%）

5 文档流

网页是一个多层结构，一层叠着一层，通过css可以分别为每一层来设置样式，作为用户来讲只能看到最顶层，在这些层中，最底下的一层为文档流。

文档流是一个位置，所有创建元素都是在文档流中进行排列的

元素主要两个状态，在文档流中，不在文档流中（脱离文档流）

元素在文档流中的特点

• 块元素
  • 在页面独占一行
  • 默认宽度是父元素的全部（会把父元素撑满）
  • 默认高度是被内容撑开
• 行内元素
  • 行内元素不会独占一行，只占自身大小
  • 行内元素在页面向右水平排列，如果一行不能容纳所有元素，则换行自左向右。
  • 行内元素默认的宽度和高度都是被内容撑开