奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 题库 >

CSS3常见面试题,带答案来自小神

时间:2018-09-11 22:17来源: 作者:Vuez
雪碧图、字体图标、ba<x>se64

雪碧图

css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点:

1、减少Http请求数量(因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chrome是6个,Firefox是8),提高加载性能 2、有些情况下可以减少图片的大小(字节总和)

缺点:
1、高清屏会失真
2、雪碧图不方便变化,提高了网页开发和维护成本

字体图标

字体图标就是利用字体来显示网页中的的纯色图标,或者是特殊字体

原理:

计算机里面每个字符都有一个unicode编码,比如「我」的unicode是\u6211(16进制),而字体文件的作用是规定某个字符应该用什么形状来显示,利用@font-face原理载入图标字体库,然后调用图标

优点:

1、灵活性:可以任意地缩放,改变颜色,产生阴影,透明效果,可以快速转化形态(:hover)
2、轻量性:本身体积更小,但携带的信息并没有削减。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合HTML5离线存储做性能优化。
3、兼容性:网页字体支持所有现代浏览器,包括IE低版本。

缺点:

1、图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用。 2、制作用于生成icon font的svg比较麻烦

base64

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息

优点:

1、减少了HTTP请求 2、某些文件可以避免跨域的问题 3、没有图片更新要重新上传,还要清理缓存的问题

缺点:

1、用于小图,体积约为原图的4/3 2、兼容性:IE6/IE7浏览器是不支持

伪类与伪元素

1、两者都不存在于HTML文档树中,伪类与伪元素都是用于向选择器加特殊效果
2、伪类与伪元素的本质区别就是是否抽象创造了新元素
3、伪类只要不是互斥可以叠加使用
4、伪元素在一个选择器中只能出现一次,并且只能出现在末尾
5、伪类与伪元素优先级分别与类、标签优先级相同
6、伪类单冒号,伪元素双冒号
 

效果属性(box-shadow、border-radius、background、clip-path)

box-shadow

1、营造层次感(立体感)
2、充当没有宽度的边框
3、 特殊效果

background

1、纹理/图案
2、渐变
3、 雪碧图动画
4、背景图尺寸适应

clip-path

1、对容器进行裁剪
2、常见几何图形
3、自定义路径

Canvas和svg

Canvas

1、Canvas是基于位图的,它不能够改变大小,只能缩放显示,放大或缩小时图形质量会有所损失
2、 依赖分辨率,逐像素进行渲染的
3、 Canvas 通过 Javascript 来绘制2D图形(动态生成)
4、 不支持事件处理器。Canvas输出的是一整幅画布,能够以 .png 或 .jpg 格式保存结果图像
5、 适合像素处理,动态渲染和大数据量绘制,最适合图像密集型的游戏(频繁重绘对象)
6、 如果图形位置发生变化,整个场景需要重新绘制,包括任何或许已被图形覆盖的对象

svg

1、SVG 可缩放矢量图形(Scalable Vector Graphics),是一种使用可扩展标记语言(XML)描述2D图形的语言
2、不依赖分辨率,逐元素(DOM元素)进行渲染,能够很好的处理图形大小的改变, 放大或缩小时图形质量不会有所损失
3、 基于XML,用文本格式的描述性语言来描述图像内容
4、 支持事件处理器。SVG绘制出的每个图形元素都是独立的DOM节点,能够方便的绑定事件
5、 适合静态图片展示,高保真文档查看和打印的应用场景,不适合游戏应用)
6、 如果对象属性发生变化,浏览器能自动重现图形。也就是说,SVG绘图很容易编辑,只需要增加或移除相应的元素即可

浏览器内核

Trident内核(IE内核)

代表作品是IE,因IE捆绑在Windows中,所以占有极高的份额,又称为IE内核或MSHTML,此内核只能用于Windows平台,且不是开源的。 代表作品还有腾讯、Maxthon(遨游)、360浏览器等。但由于市场份额比较大,曾经出现脱离了W3C标准的时候,同时IE版本比较多, 存在很多的兼容性问题

Gecko(Firefox内核)

代表作品是Firefox,即火狐浏览器。因火狐是最多的用户,故常被称为firefox内核它是开源的,最大优势是跨平台,在Microsoft Windows、Linux、MacOs X等主 要操作系统中使用

Webkit内核(Safari内核,Chrome内核原型,开源)

它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核

Presto内核

表作品是Opera,Presto是由Opera Software开发的浏览器排版引擎,它是世界公认最快的渲染速度的引擎。在13年之后,Opera宣布加入谷歌阵营,弃用了 Presto

Blink内核

由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎,V8,使JS运行速度极大地提高了

css动画

动画类型

 1、transition补间动画 2、keyframe关键帧动画 3、animation逐帧动画

补间动画

 1、位置-平移(left/right/margin/transform) 2、方位-旋转(transform) 3、大小-缩放(transform) 4、透明度(opacity) 5、其他线性变换(transform)

内容来自:https://hongqingcao.github.io/Front-end-notes

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-09-11 22:09

关注奔三路