CSS面试题汇总

1. z-index 属性在什么情况下会失效？
2. 行内元素和块级元素有什么区别
3. CSS选择器有哪些？优先级分别是什么？哪些属性可以继承？
4. BFC是什么？怎么触发BFC，BFC有什么应用场景？
5. 说说对 CSS 工程化的理解
6. 怎么实现单行、多行文本溢出隐藏？
7. transition和animation的区别是什么？
8. 说说 Vue 中 CSS scoped 的原理
9. IconFont 的原理是什么?
10. 你知道哪些CSS模块化的方案？
11. CSS优化、提高性能的方法有哪些？
12. 如果使用CSS提高页面性能？
13. grid网格布局是什么？
14. CSS3新增了哪些特性？
15. 说说对 CSS 预编语言的理解，以及它们之间的区别
16. 怎么理解回流跟重绘？什么场景下会触发？

下附答案

1. z-index属性在什么情况下会失效？

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
• 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

参考文章：为什么我的 z-index 又不生效了

2.行内元素和块级元素有什么区别

1. 默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
2. 块级元素可以设置 width, height属性。而行内元素设置width, height无效。
3. 块级元素可以设置margin 和 padding。行内元素 是水平方向有效，竖直方向无效。
4. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

5. 设置居中

   • 行内元素想要设置水平居中，只需要text-align: center属性即可。而块级元素想要设置水平居中，设置 margin:0 auto; 即可。

3. CSS选择器有哪些？优先级分别是什么？哪些属性可以继承？

答案

4. BFC是什么？怎么触发BFC，BFC有什么应用场景？

1. 什么是BFC？
   BFC：（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
2. 怎么触发BFC
   1、浮动元素，float 除 none 以外的值；
   2、定位元素，position（absolute，fixed）；
   3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
   4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
3. BFC的特性
   1、BFC 是页面上的一个独立容器，容器里面的子元素不会影响外面的元素。
   2、BFC 内部的块级盒会在垂直方向上一个接一个排列
   3、同一 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免外边距折叠
   4、每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接 触（从右向左的格式的话，则相反），即使存在浮动
   5、浮动盒的区域不会和 BFC 重叠
   6、计算 BFC 的高度时，浮动元素也会参与计算
4. BFC有什么应用场景?
   1、防止外边距（margin）重叠
   2、清除浮动解决令父元素高度坍塌的问题
   3、自适应两列布局

7. transition和animation的区别是什么？

• transition是过渡属性，强调过渡，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
• animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。