前端基础：100道CSS面试题总结

你的名字 2022-10-06 05:56 252阅读 0赞

#### 前言 ####

> CSS 是层叠样式表（Cascading Style Sheets）的简称。CSS 主要作用是美化网页、布局页面。CSS 规则主要由两个主要部分构成：选择器及一条或多条声明。在前端基础面试中，CSS 是不会缺席的，下面就给大家分享下 CSS 的常见面试题。

#### CSS面试题： ####

1.  介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
2.  CSS 选择符有哪些？
3.  ::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。
4.  伪类与伪元素的区别
5.  CSS 中哪些属性可以继承？
6.  CSS 优先级算法如何计算？
7.  关于伪类 LVHA 的解释?
8.  CSS3 新增伪类有那些？
9.  如何居中 div？
10. display 有哪些值？说明他们的作用。
11. position 的值 relative 和 absolute 定位原点是？
12. CSS3 有哪些新特性？（根据项目回答）
13. 请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？
14. 用纯 CSS 创建一个三角形的原理是什么？
15. 一个满屏品字布局如何设计?

> ![c7418ab756821a6391fe50c2c62ad807.png][]

1.  CSS 多列等高如何实现？
2.  经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？
3.  li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
4.  为什么要初始化 CSS 样式？
5.  什么是包含块，对于包含块的理解?
6.  CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？
7.  width:auto 和 width:100%的区别
8.  绝对定位元素与非绝对定位元素的百分比计算的区别
9.  简单介绍使用图片 base64 编码的优点和缺点。
10. ‘dsplay’、'position’和’float’的相互关系？
11. margin 重叠问题的理解。
12. 对 BFC 规范（块级格式化上下文：block formatting context）的理解？
13. IFC 是什么？
14. 请解释一下为什么需要清除浮动？清除浮动的方式
15. 使用 clear 属性清除浮动的原理？

> ![ad4581f81744d25cd5003661743ecd1a.png][]

1.  zoom:1 的清除浮动原理?
2.  移动端的布局用过媒体查询吗？
3.  使用 CSS 预处理器吗？喜欢哪个？
4.  CSS 优化、提高性能的方法有哪些？
5.  浏览器是怎样解析 CSS 选择器的？
6.  在网页中应该使用奇数还是偶数的字体？为什么呢？
7.  margin 和 padding 分别适合什么场景使用？
8.  抽离样式模块怎么写，说出思路，有无实践经验？
9.  简单说一下 css3 的 all 属性。
10. 为什么不建议使用统配符初始化 css 样式。
11. absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？
12. 对于 hasLayout 的理解？
13. 元素竖向的百分比设定是相对于容器的高度吗？
14. 全屏滚动的原理是什么？用到了 CSS 的哪些属性？
15. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？

> ![126f2ac22b2f28afde12d6374a646d52.png][]

1.  视差滚动效果，如何给每页做不同的动画？
2.  如何修改 chrome 记住密码后自动填充表单的黄色背景？
3.  怎么让 Chrome 支持小于 12px 的文字？
4.  让页面里的字体变清晰，变细用 CSS 怎么做？
5.  font-style 属性中 italic 和 oblique 的区别？
6.  设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？
7.  layout viewport、visual viewport 和 ideal viewport 的区别？
8.  position:fixed; 在 android 下无效怎么处理？
9.  如果需要手动写动画，你认为最小时间间隔是多久，为什么？
10. 如何让去除 inline-block 元素间间距？
11. 有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。
12. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
13. 浏览器如何判断是否支持 webp 格式图片
14. 什么是 Cookie 隔离？
15. style 标签写在 body 后与 body 前有什么区别？

> ![059dcd9395334dd65c31071f0d1e71e7.png][]

1.  什么是 CSS 预处理器/后处理器？
2.  阐述一下 CSSSprites
3.  使用 rem 布局的优缺点？
4.  画一条 0.5px 的线
5.  transition 和 animation 的区别
6.  什么是首选最小宽度？
7.  为什么 height:100%会无效？
8.  min-width/max-width 和 min-height/max-height 属性间的覆盖规则？
9.  内联盒模型基本概念
10. 什么是替换元素？
11. 替换元素的计算规则？
12. content 与替换元素的关系？
13. margin:auto 的填充规则？
14. margin 无效的情形
15. border 的特殊性？

> ![217d39b7824adfed6555abd1eaa67663.png][]

1.  什么是基线和 x-height？
2.  line-height 的特殊性？
3.  vertical-align 的特殊性？
4.  overflow 的特殊性？
5.  无依赖绝对定位是什么？
6.  absolute 与 overflow 的关系？
7.  clip 裁剪是什么？
8.  relative 的特殊性？
9.  什么是层叠上下文？
10. 什么是层叠水平？
11. 元素的层叠顺序？
12. 层叠准则？
13. font-weight 的特殊性？
14. text-indent 的特殊性？
15. letter-spacing 与字符间距？

> ![36f68f4459d0d24faa6cac1bd64a047b.png][]

1.  word-spacing 与单词间距？
2.  white-space 与换行和空格的控制？
3.  隐藏元素的 background-image 到底加不加载？
4.  如何实现单行／多行文本溢出的省略（…）？
5.  常见的元素隐藏方式？
6.  css 实现上下固定中间自适应布局？
7.  css 两栏布局的实现？
8.  css 三栏布局的实现？
9.  实现一个宽高自适应的正方形
10. 实现一个三角形

> ![bae100626433946c3d285a7ca695ff65.png][]  
> **篇幅有限，需要文中 《100道CSS面试题总结》完整版（含解析）PDF文档可以【[点击这里][Link 1]】免费领取！**

[c7418ab756821a6391fe50c2c62ad807.png]: /images/20221005/4df804fb81b842d2b45d2c6b4829efa4.png
[ad4581f81744d25cd5003661743ecd1a.png]: /images/20221005/61ea5b5f7aec46cd8a412b1cdb806e4c.png
[126f2ac22b2f28afde12d6374a646d52.png]: /images/20221005/eb599a5e08b744c1a7fc28f8880ddba3.png
[059dcd9395334dd65c31071f0d1e71e7.png]: /images/20221005/53afc76503a844c581ec570761c539ad.png
[217d39b7824adfed6555abd1eaa67663.png]: /images/20221005/31dc8c1a991e499c9ec7af1b405840f2.png
[36f68f4459d0d24faa6cac1bd64a047b.png]: /images/20221005/55982df3be544ee49a1b4ee1ca0196cf.png
[bae100626433946c3d285a7ca695ff65.png]: /images/20221005/e49b0ef9407b4985b9c3ea54e68fa6ef.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=Vc5bSjgl