css面试题及答案【集合目录】

以你之姓@ 2024-03-26 23:55 64阅读 0赞

![在这里插入图片描述][12884df5b2124a4f8f19e0eb0606ea27.png_pic_center]

前言： 欢迎浏览和关注本专栏《 [前端就业宝典][Link 1] 》， 不管是扭螺丝还是造火箭， 多学点知识总没错。 这个专栏是扭螺丝之上要造火箭级别的知识，会给前端工作学习的小伙伴带来意想不到的帮助。

> 本专栏将前端知识拆整为零，主要包含html、css、javascript、Vue、React、浏览器、计算机网络、前端性能优化、前端工程化、手写核心代码的一些面试题及答案等。

CSS可算是前端开发三驾马车之一，其作用就是装饰页面，让炫酷潇洒清新自然得以实现。CSS的面试题可以有很多很多，下面这些你都会吗，会的话学习一下。

### CSS基础 ###

[CSS选择器及其优先级][Link 1]  
[CSS中可继承与不可继承属性有哪些][Link 1]  
[display的属性值及其作用][Link 1]  
[display的block、inline和inline-block的区别][Link 1]  
[隐藏元素的方法有哪些][Link 1]  
[link和@import的区别][Link 1]  
[transition和animation的区别][Link 1]  
[display:none与visibility:hidden的区别][Link 1]  
[伪元素和伪类的区别和作用？][Link 1]  
[对requestAnimationframe的理解][Link 1]  
[对盒模型的理解][Link 1]  
[为什么有时候⽤translate来改变位置⽽不是定位？][Link 1]  
[li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？][Link 1]

### CSS3中有哪些新特性 ###

[替换元素的概念及计算规则][Link 1]  
[常见的图片格式及使用场景][Link 1]  
[对 CSSSprites 的理解][Link 1]  
[什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？][Link 1]  
[margin 和 padding 的使用场景][Link 1]  
[对line-height 的理解及其赋值方式][Link 1]  
[CSS 优化和提高性能的方法有哪些？][Link 1]  
[CSS预处理器/后处理器是什么？为什么要使用它们？][Link 1]  
[::before 和 :after 的双冒号和单冒号有什么区别？][Link 1]  
[display:inline-block 什么时候会显示间隙？][Link 1]  
[单行、多行文本溢出隐藏][Link 1]  
[Sass、Less 是什么？为什么要使用他们？][Link 1]  
[对媒体查询的理解？][Link 1]  
[对 CSS 工程化的理解][Link 1]  
[如何判断元素是否到达可视区域][Link 1]  
[z-index属性在什么情况下会失效][Link 1]  
[CSS3中的transform有哪些属性][Link 1]

### 页面布局 ###

[常见的CSS布局单位px、em、rem的区别及使用场景][Link 1]  
[两栏布局的实现][Link 1]  
[三栏布局的实现][Link 1]  
[水平垂直居中的实现][Link 1]  
[如何根据设计稿进行移动端适配？][Link 1]  
[对Flex布局的理解及其使用场景][Link 1]  
[响应式设计的概念及基本原理][Link 1]

### 定位与浮动 ###

[为什么需要清除浮动？清除浮动的方式][Link 1]  
[使用 clear 属性清除浮动的原理？][Link 1]  
[对BFC的理解，如何创建BFC][Link 1]  
[什么是margin重叠问题？如何解决？][Link 1]  
[元素的层叠顺序][Link 1]  
[position的属性有哪些，区别是什么][Link 1]  
[display、float、position的关系][Link 1]  
[absolute与fixed共同点与不同点][Link 1]  
[对 sticky 定位的理解][Link 1]

### 场景应用 ###

[实现一个三角形][Link 1]  
[实现一个扇形][Link 1]  
[实现一个宽高自适应的正方形][Link 1]  
[画一条0.5px的线][Link 1]  
[设置小于12px的字体][Link 1]  
[如何解决 1px 问题？][Link 1]

[12884df5b2124a4f8f19e0eb0606ea27.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/32a199f836fc431689380b544265bb96.png
[Link 1]: https://dajianshi.blog.csdn.net/article/details/133301296