我要评论前几天很开心收到了一位粉丝的后台回复，说已经获得了一个前端面试机会。可昨天给小编的回复却让小编的心情久久难以回复。
张大强：今天面试唉…真的一言难尽，我一个5年的前端程序员竟然在CSS上落败了，谁能想到X公司会考这么细节的东西
确实，CSS的基础属性既多又复杂，对于技术有偏重的前端程序员而言，很难面面俱到。为了让更多初中级（可能还有高级）的前端程序员们不「落马」，小编整理了一份学习CSS的干货及CSS面试中常考的题给大家避避雷。
PATE one 基础篇
1、CSS选择器有哪些
2、解释css像素，设备像素与物理像素
- 设备像素就是手机屏幕上的真实像素点。iphone6的设备像素7501334，也就是说iphone6屏幕上有7501334个像素点
- 物理像素是指操作系统定义的一种长度单位。iphone6的设备独立像素375*667，正好是设备像素的一半
- css像素是CSS中的长度单位，在CSS中使用的px，都是指CSS像素
3、CSS中link和@import的区别
-
link属于HTML标签，而@import是CSS提供的
-
页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
-
import只在IE5以上才能识别，而link是HTML标签，无兼容问题
-
link方式的样式的权重高于@import的权重
4、CSS优先级
选择器的特殊性值表述为 4 个部分，用 0,0,0,0 表示。
- ID 选择器的特殊性值，加 0,1,0,0
- 类选择器、属性选择器或伪类，加 0,0,1,0
- 元素和伪元素，加 0,0,0,1
- 通配选择器*对特殊性没有贡献，即 0,0,0,0
- 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为
1,0,0,0,0
PATE two 提高篇
1、伪类选择器和伪元素的区别
伪类用于向某些选择器添加特殊效果 (单冒号)
伪元素用于将某个特殊的东西添加到某些元素的前后 (双冒号)
2、::after/:after与::before/:before的区别
- :before在元素之前添加效果/:after是在元素之后添加效果
- :after/:before是CSS2提出的,兼容IE8
- ::after/::before是CSS3为了区分伪类和伪元素的做出的差别,为了避免兼容性问题,习惯性的还是写:after/:before
3、CSS hack 知道哪些
由于不同的浏览器，甚至同一浏览器的不同版本对 CSS 的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code 就称 CSS。
4、为什么要清除浮动？如何清除
引起的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决的方法：
5、CSS sprite是什么？有什么优缺点？
是精灵图，将多个小图片拼接到一个图片中，通过background-position和元素尺寸调节需要显示的背景图案。
优点：减少http请求数，极大的提高页面加载速度；增加图片信息重复度，提高压缩比，减少图片大小；更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
缺点：图片合并麻烦、不方便维护。
6、有什么不同的方式可以隐藏内容?
visibilty：hidden：元素仍然在文档流中，并占用空间
display：none：元素脱离文档流，不占用空间
position：left：-999999px：将内容至于屏幕之外
text-index：-9999：只适用于block元素中的文本
PATE three 实战篇
1、写一个左中右布局，占满全屏，其中左右两块的固定宽度是200，中间自适应宽度的结构及样式
方法一
方法二
2、溢出显示的另外一种显示方式
下期精彩预告，前端面试复习总结『Vue』篇即将来袭！！！
本文地址：https://blog.csdn.net/taotao100595/article/details/109236142
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论