前端面试问题 ——css

1、css选择器：

    1、标签选择器
    2、class选择器
    3、id选择器
    4、属性选择器:  a[href="baidu.com"]{}
    5、伪类选择器： :hover{}
    6、伪元素选择器， 如 ::before{}
    7、* 通配符
     下面三种由上面7 种基础的选择器或者组合：
    8、后代选择器 div p ，p只要是div的子孙后代即可
    9、子选择器 div>p ，p的直接父元素是div
    10、兄弟选择器 div+p

2、css 优先级：

优先级关系：
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

属性后插有 !important 的属性拥有最高优先级。!important > 内联样式
若同时插有 !important运用上面的规则

优先级一定会问到权重，选择器权重不是简单的累加

权值等级划分， 一般来说是划分4个等级：
    第一等级：代表 内联样式，如 style=""，权值为 1000；
    第二等级：代表 ID选择器，如 #id="", 权值为 100；
    第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 10；
    第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 1；
    此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0；
  
css优先级规则：
    1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
    2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；
    3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；

参考来自： https://www.runoob.com/w3cnote/css-style-priority.html

当 min-width、max-width、min-height、max-height 和 !important
发生冲突时，前面4个才是大哥。 当 min 和 max 发生冲突时，min才是大哥。

3、position定位？

static、absolut、relative、fixed、sticky

1、relative，absolute相对于哪个定位：

relative：其次relative也未脱离文档流，relative生成相对定位的元素，相对于自身的正常位置做定位

absolute：相对于 static 定位以外的第一个父元素进行定位。 
也就是父元素的position取值可以是：absolute fixed relative sticky inherit(ie版本都不支持)
显然，最可能和常用的取值是 relative 

2、fixed相对于什么定位：

元素的位置相对于浏览器视口（html）

4、animation停在最后一帧：

animation-fill-mode:forwards;

animation-fill-mode 取值: none(默认) | forwards | backwards | both;

5、css解析

.a .b{
}
和
.b{
}

下面的执行速度要快，因为css解析是从右往左的顺序，所以第一个是先找到b，再确定这个b的上级是不是a。
为什么是从右往左查找，因为css也可以看做一棵树，如果从左往右查找，就相当于从树的根结点出发，一直向下查找直到叶子节点。这样找到叶子节点才发现不是b，然后回溯，这样速度慢且浪费大量的性能。因此css的查找是从叶子节点开始的，然后往上查找