【CSS】前端学习DAY4知识点小结

1. 样式的继承

为一个元素设置样式的同时也会应用到他的后代元素上也就是说继承是发生在祖先与后代之间的，利用继承可以将同样的样式设置在共同的祖先元素上，方便开发。并不是所有样式都会被继承比如background-color

2.选择器的权重

内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器（0）>继承的样式（没有优先级）
说明

• 比较优先级时需要将所有选择器的优先级相加计算（同类选择器相加无法跨数量级）
  例
  div#box1的优先级>#box1
• 分组选择器的优先级需要单独计算
• 如果优先级计算后相等则优先使用靠下的样式
• （慎用）可以再某个样式后面添加!important则此时这个样式会获得最高的优先级，甚至超过内联样式

3. 单位

1. px

像素
百分比：可以将属性值设置成相对于其父元素的百分比，可以使子元素根据父元素而改变

2. em

相对于元素（自身的）字体大小来计算的
1em = 1 font-size = 16px（默认）
注意
em会根据字体大小（font-size）的改变而改变

• rem
  相对于根元素（HTML）的字体大小来计算的

3.颜色

• rgb值
  0-255（0%-100%）
  光的三原色
  用数字表示颜色
• rgba
  在rgb的基础上增加了a表示透明度（0-1）
  1 完全不透明 0 完全透明
• 十六进制rgb值
  00-ff
• aabbcc-#abc
• HSL（不常用）
  H 色相 0-360
  S 饱和度 0-100%
  L 亮度 0-100%

4. 文档流

概念
网页是一个多层结构一层摞着一层，通过css可以为每一层设置样式，这些层中最底下的一层我们叫做文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。

元素有两种状态
在文档流中
不在文档流中（脱离文档流）

元素在文档流中的特点

• 内联元素
  只占自身的大小（自左向右水平排开一行不能容纳则换至下一行）
  默认宽度：被内容撑开
  默认高度：被内容撑开

• 区块元素
  独占一行（自上向下垂直排列）
  默认宽度：父元素的全部
  默认高度：被子元素（内容）撑开