面试题-css篇

北寻北爱2026-03-16 8:54

文章目录

  • 一、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 缩放来解决

相关推荐
sbjdhjd8 小时前
Redis 主从复制、哨兵高可用与 Cluster 集群部署实验手册
运维·前端·redis·云原生·开源·bootstrap·html
乐兮创想 小林9 小时前
企业官网移动端性能优化实战：从 Core Web Vitals 到图片/CDN/响应式的工程清单
前端·性能优化·网站建设·北京网站建设公司
前端一小卒9 小时前
不手写代码的第 30 天，我才明白前端这个岗位还剩什么
前端·javascript·ai编程
Ajie'Blog9 小时前
Copilot Agent Tasks API 开放：AI 编程开始进入后台任务时代
服务器·前端·javascript·人工智能·copilot·ai编程
老毛肚10 小时前
jeecgboot vue TS & 模板化 04
前端·javascript·vue.js
AI_零食11 小时前
鸿蒙PC Electron跨平台应用开发：24时区时间表应用详解
前端·华为·electron·开源·harmonyos·鸿蒙
Electrolux12 小时前
[onlyoffice-v9]纯前端怎么实现编辑预览office
前端·javascript·github
码云之上12 小时前
聊聊如何设计一个高效、稳定的 Node.js 接入层
前端·后端·node.js
kyriewen12 小时前
我读了一遍 Babel 编译后的 async/await，终于搞懂了它的原理（附 20 行手写实现）
前端·javascript·面试
IT_陈寒13 小时前
Vite项目build后路由404了？你可能漏了这个小配置
前端·人工智能·后端
热门推荐
01GitHub 镜像站点02【AI】2026 年具身智能模型和世界模型总结032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04Codex 下载安装指南：Windows 和 macOS 官方版下载05Agnes AI 全模态 API 免费实测报告：文生图 + 文生视频完整测试06【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南08Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用，怎么排查和修复09CC-Switch 下载、安装与使用配置指南【2026.5.29】102026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？