题目概览
- 对GBK和UTF-8的理解
- 对z-index的理解
- bind、call、apply的区别？
题目解答
对GBK和UTF-8的理解
含义
- GBK编码：是指中国的中文字符，其它它包含了简体中文与繁体中文字符，另外还有一种字符“gb2312”，这种字符仅能存储简体中文字符
- UTF-8编码：它是一种全国家通过的一种编码，如果你的网站涉及到多个国家的语言，那么建议你选择UTF-8编码
区别
- UTF8编码格式很强大，支持所有国家的语言，正是因为它的强大，才会导致它占用的空间大小要比GBK大，对于网站打开速度而言，也是有一定影响的
- GBK编码格式，它的功能少，仅限于中文字符，当然它所占用的空间大小会随着它的功能而减少，打开网页的速度比较快
网页乱码
如果网页源代码是
gbk编写的，而内容中的文字是utf-8的，那么，此时打开浏览器就会出现HTML乱码。反之也会出现乱码。解决办法是使用专业的编辑软件进行HTML网页的编写。例如，尽量不要直接使用记事本进行编写HTML网页编码是gbk，但是程序从程序库中调出呈现的是utf-8编码的内容也会造成编码乱码。此时，程序查询数据库数据显示数据进行转码即可
mysql_query("SET NAMES 'UTF-8'") //将查询数据转码为UTF-8浏览器不能自动检测网页编码，造成网页乱码，解决办法是网页加入
meta charset编码标签<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
对z-index的理解
取值
/* 字符值 */ z-index: auto; /* 整数值 */ z-index: 0; z-index: 3; z-index: 289; z-index: -1;/* 使用负值降低优先级 */ /* 全局值 */ z-index: inherit; z-index: initial; z-index: unset;特性
支持负值
支持css3 animation动画
@keyframes zIndex{ 0% {z-index:-1;} 100% {z-index:51;} }两个div，无设置定位（z-index设置与否都是失效的）或者两个都已定位元素且z-index相同，层级关系按照文档流的顺序显示，后面的覆盖前面的
扫描二维码关注公众号，回复： 8401296 查看本文章
<div style="width:100px;height:100px;background-color:red;position:relative;top:10px;"></div> <div style="width:50px;height:50px;background-color:blue;"></div> <div style="width:100px;height:100px;background-color:red;position:relative;z-index:1;"></div> <div style="width:50px;height:50px;background-color:blue;position:relative;top:-50px;z-index:1;"></div>如果两个元素都没有设置z-index，使用默认值auto，一个定位一个没有定位，那么定位元素覆盖未定位元素
<div style="width:100px;height:100px;background-color:red;"></div> <div style="width:50px;height:50px;background-color:blue;position:relative;top:-50px;"></div> <div style="width:100px;height:100px;background-color:red;"></div> <div style="width:50px;height:50px;background-color:blue;position:relative;top:-25px;z-index:-5;"></div>如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方
<div style="width:100px;height:100px;background-color:red;position:relative;z-index:10;"> <div style="width:50px;height:50px;background-color:blue;position:relative;z-index:-5;"></div> </div>如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效
<div style="width:100px;height:100px;background-color:red;position:relative;"> <div style="width:50px;height:50px;background-color:blue;position:relative;z-index:-5;"></div><!--z-index为-5所以在父元素的后面> </div>如果兄弟元素的z-index生效，那么其子元素覆盖关系由父元素决定
<div style="width:100px;height:100px;background-color:red;position:relative;z-index:5;"> <div style="width:50px;height:250px;background-color:blue;position:relative;z-index:50;"></div> </div> <div style="width:100px;height:100px;background-color:yellow;margin-top:-40px;position:relative;z-index:10;"> <div style="width:30px;height:150px;background-color:black;position:relative;z-index:-10;"></div> </div>
bind、call、apply的区别？
相同：
call和apply都是为了解决改变this的指向。作用都是相同的，不同：只是传参的方式不同。
除了第一个参数外，
call可以接收一个参数列表//fun.call(obj, arg1, arg2, arg3,...) 指定作用域 同时执行函数 Function.prototype.myCall = function (context = window) { context.fn = this; var args = [...arguments].slice(1); var result = context.fn(...args); // 执行完后干掉 delete context.fn; return result; }apply只接受一个参数数组。//fun.apply(obj, [arg1, arg2, arg3, ...]) 指定作用域 同时执行函数，后面的参数是数组 Function.prototype.myApply = function (context = window) { context.fn = this; var result // 判断 arguments[1] 是不是 undefined if (arguments[1]) { result = context.fn(...arguments[1]) } else { result = context.fn() } delete context.fn return result;bind绑定完之后返回一个新的函数，不执行//const fb = fun.bind(obj) fb(arg1, arg2, ...) 返回一个函数,在使用 bind 之后，只会返回一个修改了作用域的函数，等再次调用时才会执行 Function.prototype.myBind = function (context) { if (typeof this !== 'function') { throw new TypeError('Error') } var _this = this var args = [...arguments].slice(1) // 返回一个函数 return function F() { // 因为返回了一个函数，我们可以 new F()，所以需要判断 if (this instanceof F) { return new _this(...args, ...arguments) } return _this.apply(context, args.concat(...arguments)) } }