8.阶段测 Ⅱ-灵析社区

1. 选择器与元素的相关度越高，优先级越高还是低？

高。

2. 请从选择器来源的角度，写出三种选择器之间的优先级关系。

开发者定义选择器 > 用户定义选择器 > 浏览器默认选择器。

3. 同级时，复合选择器优先级更高还是单选择器优先级更高？

复合选择器。

4. 选择器与元素的相关度越高，优先级越高还是低？

高。

5. 请从选择器来源的角度，写出三种选择器之间的优先级关系。

开发者定义选择器 > 用户定义选择器 > 浏览器默认选择器。

6. 同级时，复合选择器优先级更高还是单选择器优先级更高？

复合选择器。

7. !important 的作用是？

!important 可以忽略选择器 CSS 选择器优先级，让声明的属性总是生效。

8. !important 的弊端有哪些？

9. 如何避免 !important 的弊端？

• 用 CSS 选择器优先级解决样式冲突

• 不在全局、会被复用的插件中使用 !important

• 通过 CSS 命名或 Shadow DOM 限制 CSS 作用域

10. 如何计算 CSS 选择器的优先级？

将 CSS 选择器优先级量化为权重，为不同类型的 CSS 选择器设置初始权重。选择器的组合，即初始权重的累加。累加值越高，优先级越高。

11. 限制 CSS 选择器的作用域有几种方法？分别是什么？

4种。通过 CSS 命名限制；通过 Shadow DOM 限制；通过 @document 限制；通过 CSS Modules 限制。

12. 如何通过 Shadow DOM 限制 CSS 选择器的作用域？

通过 JS 给已有元素创建影子 DOM，将样式通过style 标签写入影子 DOM。

13. CSS 中的单位分为哪几类？

绝对长度单位和相对长度单位。

14. 百分比 % 相对于谁？

父元素。

15. 颜色值都有哪几种表示方法？

关键字、RGB color model、HSL color model。

16. 盒模型的组成是怎样的？

盒模型由内向外：内容 content + 内边距 padding + 边框 border + 外边距 margin。

17. 简单描述一下盒模型有哪两类。

• 标准盒模型box-sizing:content-box：width 和 height 设置内容 content 的宽和高

• 替代盒模型box-sizing:border-box：width 和 height 设置内 content + 内边距 padding + 边框 border 的宽和高

18. 块盒子和内联块盒子的差异在于？

块盒子换行而内联块盒子不换行。

19. 块盒子、内联盒子和内联块盒子三者中，width和height生效的是？

块盒子和内联块盒子。

20. 块盒子、内联盒子和内联块盒子三者中，竖直方向padding和margin无效的是？

内联盒子。

21. 可以如何给父元素设置让子元素成为弹性盒子？

给父元素设置 display:flex 或 display:inline-flex。