5年前端竟败在了CSS面试上

前几天很开心收到了一位粉丝的后台回复，说已经获得了一个前端面试机会。可昨天给小编的回复却让小编的心情久久难以回复。

张大强：今天面试唉…真的一言难尽，我一个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