104道 CSS 面试题

最新推荐文章于 2025-04-23 11:38:43 发布

无心玩编程

最新推荐文章于 2025-04-23 11:38:43 发布

阅读量1.5k

点赞数 1

分类专栏：前端基础文章标签：前端 html5 css3

本文链接：https://blog.youkuaiyun.com/qq_41685149/article/details/109670001

版权

104道 CSS 面试题

（给前端大全加星标，提升前端技能）

作者：CavsZhouyou

https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md

本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？[1]
2.CSS 选择符有哪些？[2]
3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。[3]
4.伪类与伪元素的区别[4]
5.CSS 中哪些属性可以继承？[5]
6.CSS 优先级算法如何计算？[6]
7.关于伪类 LVHA 的解释?[7]
8.CSS3 新增伪类有哪些？[8]
9.如何居中 div？[9]
10.display 有哪些值？说明他们的作用。[10]
11.position 的值 relative 和 absolute 定位原点是？[11]
12.CSS3 有哪些新特性？（根据项目回答）[12]
13.请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？[13]
14.用纯 CSS 创建一个三角形的原理是什么？[14]
15.一个满屏品字布局如何设计?[15]
16.CSS 多列等高如何实现？[16]
17.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？[17]
18.li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？[18]
19.为什么要初始化 CSS 样式？[19]
20.什么是包含块，对于包含块的理解?[20]
21.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？[21]
22.width:auto 和 width:100\x 的区别[22]
23.绝对定位元素与非绝对定位元素的百分比计算的区别[23]
24.简单介绍使用图片 base64 编码的优点和缺点。[24]
25.‘display’、'position’和’float’的相互关系？[25]
26.margin 重叠问题的理解。[26]
27.对 BFC 规范（块级格式化上下文：blockformattingcontext）的理解？[27]
28.IFC 是什么？[28]
29.请解释一下为什么需要清除浮动？清除浮动的方式[29]
30.使用 clear 属性清除浮动的原理？[30]
31.zoom:1 的清除浮动原理?[31]
32.移动端的布局用过媒体查询吗？[32]
33.使用 CSS 预处理器吗？喜欢哪个？[33]
34.CSS 优化、提高性能的方法有哪些？[34]
35.浏览器是怎样解析 CSS 选择器的？[35]
36.在网页中应该使用奇数还是偶数的字体？为什么呢？[36]
37.margin 和 padding 分别适合什么场景使用？[37]
38.抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题][38]
39.简单说一下 css3 的 all 属性。[39]
40.为什么不建议使用通配符初始化 css 样式。[40]
41.absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？[41]
42.对于 hasLayout 的理解？[42]
43.元素竖向的百分比设定是相对于容器的高度吗？[43]
44.全屏滚动的原理是什么？用到了 CSS 的哪些属性？（待深入实践）[44]
45.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？（待深入了解）[45]
46.视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）[46]
47.如何修改 chrome 记住密码后自动填充表单的黄色背景？[47]
48.怎么让 Chrome 支持小于 12px 的文字？[48]
49.让页面里的字体变清晰，变细用 CSS 怎么做？[49]
50.font-style 属性中 italic 和 oblique 的区别？[50]
51.设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？[51]
52.layoutviewport、visualviewport 和 idealviewport 的区别？[52]

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

2.CSS 选择符有哪些？

（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1 p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel="external"]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）

3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。

4.伪类与伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句
话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::be
fore来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览
器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行
特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

详细资料可以参考：《总结伪类与伪元素》[54]