前端开发经典面试题及答案——CSS篇

一、CSS选择器的优先级排序，怎么计算权值？

二、display：none和visibility：hidden的区别

三、CSS的引用方式有哪些？它们的区别？

四、CSS有哪些选择符？可继承的属性有哪些？

CSS选择符：

可继承和不可继承的属性：

五、fixed和absolute的区别？

六、如何实现水平、垂直居中？

1、利用定位+margin:auto

2、利用定位+margin:负值

3、利用定位+transform

4、table布局

5、flex布局

6、gird布局

七、如何实现左侧边栏固定，其他内容自适应?

1、左侧固定宽度，右侧flex自适应 flex：1，占据剩余空间；

2、左侧固定宽度，右侧flex自适应 flex：1， 占据剩余空间；

3、左侧固定宽度左浮动，右侧设margin-left等于左侧宽度；

4、左侧固定宽度、固定定位，右侧宽度100%；

5、左侧宽度固定、固定定位，右侧左边距等于左侧宽度；

6、双左浮动，右侧计算属性计算宽度；

7、左侧左浮，右侧右浮动，右侧计算宽度；

8、左侧固定宽度，display:inline-block，右侧右浮动，计算宽度。

八、css3的新特性

1、CSS3新特性之选择器

2、CSS3新特性之样式

3、CSS3新特性之transition 过渡

4、CSS3新特性之transform 转换

5、CSS3新特性之animation 动画

6、CSS3新特性之渐变

九、了解过哪些页面布局？

十、Sass写一个数组？

十一、什么时候用less

1、函数式编程css

2、自定义变量用于整体主题调整

3、嵌套语法简化开发复杂度

4、页面层级结构多，重复使用的css代码较多时

十二、animation和transition

十三、盒子模型概念

十四、px、em、rem、%、vm、vh

十五、display的值和作用

十六、列举两种清除浮动的方法

1、父元素添加overflow:hidden

  通过触发BFC方式，实现清除浮动

  优点：代码简洁

  缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

2、使用after伪元素清除浮动

  优点：符合闭合浮动思想，结构语义化正确。

  缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

以上就是霸哥今日整理的前端经典面试题及答案CSS篇，如有疑问，欢迎私信霸哥！