CSS面试题
目录
1、雪碧图 （ 精灵图 ）优缺点？
2、less 和 Scss 的配置使用以及特点？
4、CSS3 新增伪类，以及伪元素？
5、img 的 alt 与 title 的异同，还有实现图片懒加载的原理？
面试题
面试题一：
1、雪碧图 （ 精灵图 ）优缺点？
问题解答：
雪碧图
是把网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的 HTTP 请求数 量，该图片使用 css background 和 background-position 属性渲染，这也就意味着你的标 签变得更复杂了，图片是在 css 中定义，并非在标签中
优点：
1、减少网页的 http 请求，从而加快了网页加载速度，提高用户体验
2、减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就 会 共用同一个头信息，从而减少了字节数
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不 需 要对每一个小元素进行命名
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格 就 可以改变
缺点：
1、在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断 裂
2、CSS Sprites 在开发的时候，要通过 photoshop 或其他工具测量计算每一个背景单元 的精确位置
3、在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片
4、精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，CSS3 新属性 可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标 代替精灵图
面试题二：
2、less 和 Scss 的配置使用以及特点？
问题解答：
less
安装依赖
1 npm install less less-loader --save
或者
2 cnpm install less less-loader --save
修改配置 在 vue 项目中 build/webpack.base.conf.js： moduls 对象的 rules 数组中最后添加
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" }引入
在每个想要使用 less 的 vue 文件中 style 加上 lang=“less”
SCSS
SCSS 即是 SASS 的新语法，是 Sassy CSS 的简写，是 CSS3 语法的超集，也就是说所有有 效的 CSS3 样式也同样适合于 SASS
SASS 是 CSS3 的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命 令行的工具或 WEB 框架插件把它转换成标准的、格式良好的 CSS 代码
SCSS 是 SASS 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 SASS 的强大功 能。
唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进
SCSS 对空白符号不敏感
安装步骤：
npm install node-sass --save-dev //安装 node-sass
npm install sass-loader --save-dev //安装 sass-loader
npm install style-loader --save-dev //安装 style-loader
出现以下问题可能是版本错误
Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
处理方法 将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1" package.json 中查找替换
npm install
npm run dev
特性：
一、（节点）可嵌套性 这个是基础，用的太多太多了，必须掌握
二、变量 变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给 一 个变量，以后调用变量就好了，很类似 js 里的变量）
三、 Mixins(混合@mixin)：可重用性高，可以注入任何东西 注意点： 1、可以相互调用，但是不能拿自己调用自己，形成递归 2、通过@include 引用
四、@extend：允许一个选择器继承另一个选择器
五、 @function:函数功能，用户使用@function 可以去编写自己的函数（常用） 使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容
六、引用父元素&：在编译时，&将被替换成父选择符（常用）
七、计算功能（会用 但是不多吧）
八、组合连接： #{} ： 变量连接字符串（目前用到的是这个）
九、循环语句：（很少用到）
十、if 语句：（很少用到）
面试题三：
3、::before 和::after 中双冒号和单冒号有什么区别、作 用？
问题解答：
区别
在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类 由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老 语 法表示伪元素
单冒号（：）用于 CSS3 的伪类
双冒号（：：）用于 CSS3 的伪元素
想让插入的内容出现在其它内容前，使用::before，否者，使用::after； 在代码顺序上，::after 生成的内容也比::before 生成的内容靠后
作用：
::before 和::after 的主要作用是在元素内容前后加上指定内容
伪类与伪元素都是用于向选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同
面试题四：
4、CSS3 新增伪类，以及伪元素？
问题解答：
CSS3 新增伪类 p:first-of-type 选择属于其父元素的首个元素的每个
元素 p:last-of-type 选择属于其父元素的最后
元素的每个
元素 p:nth-child(n) 选择属于其父元素的第 n 个子元素的每个
元素 p:nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素的每个
元素 p:nth-of-type(n) 选择属于其父元素第 n 个
元素的每个
元素 p:nth-last-of-type(n) 选择属于其父元素倒数第 n 个
元素的每个
元素 p:last-child 选择属于其父元素最后一个子元素的每个
元素 p:target 选择当前活动的
元素 :not(p) 选择非
元素的每个元素 :enabled 控制表单控件的可用状态 :disabled 控制表单控件的禁用状态 :checked 单选框或复选框被选中 伪元素 ::first-letter 将样式添加到文本的首字母 ::first-line 将样式添加到文本的首行 ::before 在某元素之前插入某些内容 ::after 在某元素之后插入某些内容
面试题五：
5、img 的 alt 与 title 的异同，还有实现图片懒加载的原理？
问题解答：
异同
alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字,title 是对图片的描述与进一步说明; 这些都是表面上的区别，alt 是 img 必要的属性，而 title 不是对于网站 seo 优化来说，title 与 alt 还有最重要的一点： 搜索引擎对图片意思的判断，主 要靠 alt 属性。所以在图片 alt 属性中以简要文字说明，同时包含关键词，也是页面优化的 一部分。条件允许的话，可以在 title 属性里，进一步对图片说明 由于过多的图片会严重影响网页的加载速度，并且移动网络下的流量消耗巨大，所以 说延迟加载几乎是标配了
原理
图片懒加载的原理很简单，就是我们先设置图片的 data-set 属性（当然也可以是其他任意 的，只要不会发送 http 请求就行了，作用就是为了存取值）值为其图片路径，由于不是 src，所以不会发送 http 请求。 然后我们计算出页面 scrollTop 的高度和浏览器的高度之 和， 如果图片举例页面顶端的坐标 Y（相对于整个页面，而不是浏览器窗口）小于前两 者之和，就说明图片就要显示出来了（合适的时机，当然也可以是 其他情况），这时候 我们再将 data-set 属性替换为 src 属性即可