CSS面试题

最新推荐文章于 2024-10-02 14:27:42 发布

面相进程，面相对象

最新推荐文章于 2024-10-02 14:27:42 发布

阅读量579

点赞数

分类专栏：前端面试题文章标签：面试 css css3

本文链接：https://blog.csdn.net/weixin_57575133/article/details/131691711

版权

前端面试题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章讨论了雪碧图的优缺点，如减少HTTP请求和维护困难；介绍了LESS和SCSS的配置使用，包括它们的安装步骤和特点，如嵌套规则和变量；解释了CSS中的::before和::after伪元素的用途和区别；列举了CSS3新增的伪类，以及图片的alt和title属性的异同；最后提到了图片懒加载的原理，即利用data-set属性延迟加载图片。

摘要由CSDN通过智能技术生成

1、雪碧图（精灵图）优缺点？

2、less 和 Scss 的配置使用以及特点？

3、::before 和::after 中双冒号和单冒号有什么区别、作用？

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”
<style lang="less" scoped></style>
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>元素的每个<p>元素
p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素
p:nth-child(n) 选择属于其父元素的第 n 个子元素的每个<p>元素
p:nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素的每个<p>元素
p:nth-of-type(n) 选择属于其父元素第 n 个<p>元素的每个<p>元素
p:nth-last-of-type(n) 选择属于其父元素倒数第 n 个<p>元素的每个<p>元素
p:last-child 选择属于其父元素最后一个子元素的每个<p>元素
p:target 选择当前活动的<p>元素
:not(p) 选择非<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 属性即可