最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！

相关知识点：

回答：

详细的资料可以参考：《CSS 盒模型详解》

相关知识点：

回答：

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

相关资料：

回答：

详细的资料可以参考：《继承属性》《CSS 有哪些属性可以继承？》

相关知识点：

回答：

对于组合声明的特殊性值计算可以参考：《CSS 优先级计算及应用》《CSS 优先级计算规则》

详细的资料可以参考：《CSS3 新特性总结(伪类)》《浅谈 CSS 伪类和伪元素及 CSS3 新增伪类》

-水平居中：给 div 设置一个宽度，然后添加 margin:0auto 属性

-水平居中，利用 text-align:center 实现

-让绝对定位的 div 居中

-水平垂直居中一

-水平垂直居中二

-水平垂直居中三

-水平垂直居中四

回答：

详细资料可以参考：《CSSdisplay 属性》

相关知识点：

回答：

相关知识点：

回答：

详细资料可以参考：《Flex 布局教程：语法篇》《Flex 布局教程：实例篇》

详细资料可以参考：《前端应该掌握的 CSS 实现多列等高布局》《CSS：多列等高布局》

详细资料可以参考：《li 与 li 之间有看不见的空白间隔是什么原因引起的？》

详细资料可以参考：《CSS 里的 visibility 属性有个鲜为人知的属性值：collapse》

详细资料可以参考：《玩转图片 base64 编码》《前端开发中，使用 base64 图片的弊端是什么？》《小 tip:base64:URL 背景图片与 web 页面性能优化》

详细资料可以参考：《position 跟 display、margincollapse、overflow、float 这些特性相互叠加后会怎么样？》

相关知识点：

回答：

相关知识点：

回答：

详细资料可以参考：《深入理解 BFC 和 MarginCollapse》《前端面试题-BFC（块格式化上下文）》

详细资料可以参考：

《BFC 和 IFC 的理解（布局）》

详细资料可以参考：《CSS3@media 查询》《响应式布局和自适应布局详解》

详细资料可以参考：《CSS 优化、提高性能的方法有哪些？》《CSS 优化，提高性能的方法》

详细资料可以参考：《探究 CSS 解析原理》

详细资料可以参考：《谈谈网页中使用奇数字体和偶数字体》《现在网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体？》

详细资料可以参考：《CSS 规范-分类方法》

详细资料可以参考：《简单了解 CSS3 的 all 属性》

详细资料可以参考：《CSS 基础篇--CSS 中 IE 浏览器的 hasLayout，IE 低版本的 bug 根源》《CSS 魔法堂：hasLayout 原来是这样的！》

详细资料可以参考：《js 实现网页全屏切换（平滑过渡），鼠标滚动切换》《用 ES6 写全屏滚动插件》

详细资料可以参考：《响应式布局原理》《响应式布局的实现方法和原理》

详细资料可以参考：《如何实现视差滚动效果的网页？》

详细资料可以参考：《去掉 chrome 记住密码后的默认填充样式》《修改谷歌浏览器 chrome 记住密码后自动填充表单的黄色背景》

详细资料可以参考：《谷歌浏览器不支持 CSS 设置小于 12px 的文字怎么办？》

详细资料可以参考：《让字体变的更清晰 CSS 中-webkit-font-smoothing》

详细资料可以参考：《什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是 PPI,DPI,DPR 和 DIP》《前端工程师需要明白的「像素」》《CSS 像素、物理像素、逻辑像素、设备像素比、PPI、Viewport》《前端开发中像素的概念》

相关知识点：

回答：

详细资料可以参考：

《移动前端开发之 viewport 的深入理解》

《说说移动前端中 viewport（视口）》

《移动端适配知识你到底知多少》

笔者再次墙裂推荐收藏这篇原文，转载于 CavsZhouyou - 前端面试复习笔记，这个仓库是原作者校招时的前端复习笔记，主要总结一些比较重要的知识点和前端面试问题，希望对大家有所帮助。

最后如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的最大动力