前端面试问题 ——css

1、css选择器:

    1、标签选择器
    2class选择器
    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的查找是从叶子节点开始的,然后往上查找

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值