面试题-css篇

文章目录

• 一、CSS基础
• • [1. CSS选择器及其优先级](#1. CSS选择器及其优先级)
  • [2. CSS中可继承与不可继承属性有哪些](#2. CSS中可继承与不可继承属性有哪些)
  • [3. display的属性值及其作用](#3. display的属性值及其作用)
  • [4. display的block、inline和inline-block的区别](#4. display的block、inline和inline-block的区别)
  • [5. 隐藏元素的方法有哪些](#5. 隐藏元素的方法有哪些)
  • [6. link和@import的区别](#6. link和@import的区别)
  • [7. transition和animation的区别](#7. transition和animation的区别)
  • [8. display:none与visibility:hidden的区别](#8. display:none与visibility:hidden的区别)
  • [9. 伪元素和伪类的区别和作用？](#9. 伪元素和伪类的区别和作用？)
  • [10. 对requestAnimationframe的理解](#10. 对requestAnimationframe的理解)
  • [11. 对盒模型的理解](#11. 对盒模型的理解)
  • [12. 为什么有时候⽤translate来改变位置⽽不是定位？](#12. 为什么有时候⽤translate来改变位置⽽不是定位？)
  • [13. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？](#13. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？)
  • [14. CSS3中有哪些新特性](#14. CSS3中有哪些新特性)
  • [15. 替换元素的概念及计算规则](#15. 替换元素的概念及计算规则)
  • [16. 常见的图片格式及使用场景](#16. 常见的图片格式及使用场景)
  • [17. 对 CSSSprites 的理解](#17. 对 CSSSprites 的理解)
  • [18. 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？](#18. 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？)
  • [19. margin 和 padding 的使用场景](#19. margin 和 padding 的使用场景)
  • [20. 对line-height 的理解及其赋值方式](#20. 对line-height 的理解及其赋值方式)
  • [21. CSS 优化和提高性能的方法有哪些？](#21. CSS 优化和提高性能的方法有哪些？)
  • [22. CSS预处理器/后处理器是什么？为什么要使用它们？](#22. CSS预处理器/后处理器是什么？为什么要使用它们？)
  • [23. ::before 和 :after 的双冒号和单冒号有什么区别？](#23. ::before 和 :after 的双冒号和单冒号有什么区别？)
  • [24. display:inline-block 什么时候会显示间隙？](#24. display:inline-block 什么时候会显示间隙？)
  • [25. 单行、多行文本溢出隐藏](#25. 单行、多行文本溢出隐藏)
  • [26. Sass、Less 是什么？为什么要使用他们？](#26. Sass、Less 是什么？为什么要使用他们？)
  • [27. 对媒体查询的理解？](#27. 对媒体查询的理解？)
  • [28. 对 CSS 工程化的理解](#28. 对 CSS 工程化的理解)
  • [29. 如何判断元素是否到达可视区域](#29. 如何判断元素是否到达可视区域)
  • [30. z-index属性在什么情况下会失效](#30. z-index属性在什么情况下会失效)
  • [31. CSS3中的transform有哪些属性](#31. CSS3中的transform有哪些属性)
  • [31. line-height: 100% 和 line-height: 1 有什么不一样？](#31. line-height: 100% 和 line-height: 1 有什么不一样？)
  • [32.如果在伪元素中不写 content 会发生什么？](#32.如果在伪元素中不写 content 会发生什么？)
  • [33.flex: shrink 和 flex-grow 的默认值是多少？它们的作用是什么？flex: 1 表示什么？](#33.flex: shrink 和 flex-grow 的默认值是多少？它们的作用是什么？flex: 1 表示什么？)
  • [34.如何消除 inline-block 元素之间的间隙？](#34.如何消除 inline-block 元素之间的间隙？)
  • [35.能否解读一下 font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto, Helvetica,Arial, sans-serif 这个字体设置？](#35.能否解读一下 font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto, Helvetica,Arial, sans-serif 这个字体设置？)
  • 36.如何快速选取同一批兄弟元素的偶数序号元素。
  • [37.CSS 中是否存在父选择器？其背后的原因是什么？](#37.CSS 中是否存在父选择器？其背后的原因是什么？)
  • 37.怎么实现样式隔离
  • 38.渐进增强、优雅降级
  • 40.
  • 41.
• 二、页面布局
• • [1. 常见的CSS布局单位](#1. 常见的CSS布局单位)
  • [2. px、em、rem的区别及使用场景](#2. px、em、rem的区别及使用场景)
  • [3. 两栏布局的实现](#3. 两栏布局的实现)
  • [4. 三栏布局的实现](#4. 三栏布局的实现)
  • 5.水平垂直居中的实现
  • [6. 如何根据设计稿进行移动端适配？](#6. 如何根据设计稿进行移动端适配？)
  • [7. 对Flex布局的理解及其使用场景](#7. 对Flex布局的理解及其使用场景)
  • [8. 响应式设计的概念及基本原理](#8. 响应式设计的概念及基本原理)
• 三、定位与浮动
• • [1. 为什么需要清除浮动？清除浮动的方式](#1. 为什么需要清除浮动？清除浮动的方式)
  • [2. 使用 clear 属性清除浮动的原理？](#2. 使用 clear 属性清除浮动的原理？)
  • [3. 对BFC的理解，如何创建BFC](#3. 对BFC的理解，如何创建BFC)
  • [4. 什么是margin重叠问题？如何解决？](#4. 什么是margin重叠问题？如何解决？)
  • [5. 元素的层叠顺序](#5. 元素的层叠顺序)
  • [6. position的属性有哪些，区别是什么](#6. position的属性有哪些，区别是什么)
  • [7. display、float、position的关系](#7. display、float、position的关系)
  • [8. absolute与fixed共同点与不同点](#8. absolute与fixed共同点与不同点)
  • [9. 对 sticky 定位的理解](#9. 对 sticky 定位的理解)
• 四、场景应用
• • [1. 实现一个三角形](#1. 实现一个三角形)
  • [2. 实现一个扇形](#2. 实现一个扇形)
  • [3. 实现一个宽高自适应的正方形](#3. 实现一个宽高自适应的正方形)
  • [4. 画一条0.5px的线](#4. 画一条0.5px的线)
  • [5. 设置小于12px的字体](#5. 设置小于12px的字体)
  • [6. 如何解决 1px 问题？](#6. 如何解决 1px 问题？)

一、CSS基础

1. CSS选择器及其优先级

2. CSS中可继承与不可继承属性有哪些

3. display的属性值及其作用

4. display的block、inline和inline-block的区别

5. 隐藏元素的方法有哪些

6. link和@import的区别

7. transition和animation的区别

8. display:none与visibility:hidden的区别

9. 伪元素和伪类的区别和作用？

10. 对requestAnimationframe的理解

11. 对盒模型的理解

12. 为什么有时候⽤translate来改变位置⽽不是定位？

13. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

14. CSS3中有哪些新特性

15. 替换元素的概念及计算规则

16. 常见的图片格式及使用场景

17. 对 CSSSprites 的理解

18. 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？

19. margin 和 padding 的使用场景

20. 对line-height 的理解及其赋值方式

21. CSS 优化和提高性能的方法有哪些？

22. CSS预处理器/后处理器是什么？为什么要使用它们？

23. ::before 和 :after 的双冒号和单冒号有什么区别？

24. display:inline-block 什么时候会显示间隙？

25. 单行、多行文本溢出隐藏

26. Sass、Less 是什么？为什么要使用他们？

27. 对媒体查询的理解？

28. 对 CSS 工程化的理解

29. 如何判断元素是否到达可视区域

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

31. CSS3中的transform有哪些属性

31. line-height: 100% 和 line-height: 1 有什么不一样？

32.如果在伪元素中不写 content 会发生什么？

33.flex: shrink 和 flex-grow 的默认值是多少？它们的作用是什么？flex: 1 表示什么？

34.如何消除 inline-block 元素之间的间隙？

35.能否解读一下 font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto, Helvetica,Arial, sans-serif 这个字体设置？

36.如何快速选取同一批兄弟元素的偶数序号元素。

37.CSS 中是否存在父选择器？其背后的原因是什么？

37.怎么实现样式隔离

38.渐进增强、优雅降级

40.

41.

二、页面布局

1. 常见的CSS布局单位

2. px、em、rem的区别及使用场景

3. 两栏布局的实现

4. 三栏布局的实现

5.水平垂直居中的实现

6. 如何根据设计稿进行移动端适配？

7. 对Flex布局的理解及其使用场景

8. 响应式设计的概念及基本原理

三、定位与浮动

1. 为什么需要清除浮动？清除浮动的方式

2. 使用 clear 属性清除浮动的原理？

3. 对BFC的理解，如何创建BFC

4. 什么是margin重叠问题？如何解决？

5. 元素的层叠顺序

6. position的属性有哪些，区别是什么

7. display、float、position的关系

8. absolute与fixed共同点与不同点

9. 对 sticky 定位的理解

四、场景应用

1. 实现一个三角形

2. 实现一个扇形

3. 实现一个宽高自适应的正方形

4. 画一条0.5px的线

5. 设置小于12px的字体

6. 如何解决 1px 问题？

思路一：直接写 0.5px

思路二：伪元素先放大后缩小

思路三：viewport 缩放来解决