down next up-arrow left-arrow settings more email twitter github heart

HTML

img标签的alt和title的区别?
alt是用于图片不能正常显示时的替代文字,title是将鼠标指针悬浮到图片上时显示的类似tooltip的内容。在不能正常显示图片的情况下,hover图片元素,仍能显示title。

CSS

浏览器是如何匹配CSS的选择器的?CSS选择器的优先级是?
从右向左。优先级从高到低依次是:important > inline(写在元素style attribute上的) > ID > class/伪类/attributes > elements/pseudo-elements
margin/padding为百分比时,是按照谁的百分比计算的?
元素直接父元素内容的宽度, 严格地说, 是父元素content的宽度,不包括父元素padding, border, margin.
水平垂直居中一个元素

方法一

See the Pen yMeLKB by wwwap (@wwwap) on CodePen.

方法二

See the Pen aJdbRp by wwwap (@wwwap) on CodePen.

方法三

See the Pen aJdbxJ by wwwap (@wwwap) on CodePen.

说明div+div.float+div 的排列情况

See the Pen RprNPe by wwwap (@wwwap) on CodePen.

手写清除浮动clearfix

See the Pen zZrxJR by wwwap (@wwwap) on CodePen.

stacking context and stacking order

说明一下几个元素的重叠情况

See the Pen dvGGRq by wwwap (@wwwap) on CodePen.

判断class为red, green, blue的三个span元素的重叠关系

See the Pen oZbbqa by wwwap (@wwwap) on CodePen.

Javascript

					var a = 1;
					var A = function() {
					  this.a = 2;
					};
					var b = new A();
					var c = A();
					console.log(a);
					console.log(b.a);
					console.log(c.a);
				
						2
						2
						Uncaught TypeError: Cannot read property 'a' of undefined
					
arrow function中的this指的是?

箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。

					  // 不使用箭头函数
					  function Person() {
					    var that = this;
					    that.age = 0;

					    setInterval(function growUp() {
					      that.age++;
					    }, 1000);
					  }

						// 使用箭头函数
						function Person(){
						  this.age = 0;

						  setInterval(() => {
						    this.age++;
						  }, 1000);
						}
					
amd的循环依赖解决办法?
					
						var a = 1;
						(function() {
							console.log(a);
							a = 2;
							var a;
						})();
						console.log(a);
					

				
						undefined
						1
					
数组去重
					uniqueArray = a.filter(function(item, pos, self) {
					    return self.indexOf(item) == pos;
					})
						// OR
					function uniq(a) {
					    var seen = {};
					    return a.filter(function(item) {
					        return seen.hasOwnProperty(item) ? false : (seen[item] = true);
					    });
					}
					// OR
					function uniq_fast(a) {
					    var seen = {};
					    var out = [];
					    var len = a.length;
					    var j = 0;
					    for(var i = 0; i < len; i++) {
					         var item = a[i];
					         if(seen[item] !== 1) {
					               seen[item] = 1;
					               out[j++] = item;
					         }
					    }
					    return out;
					}
					

promise callback函数和setTimeout回调函数的 执行顺序

					let p = new Promise(function(resolve, reject) {
						let ran = Math.random();
						if (ran > 0.5) {
						  setTimeout(function() {console.log('OUT');}, 0);
							resolve('OK');
						} else {
							reject('FAIL');
						}
					});
					p.then(function(data) {
					  console.log(data);
					});
				
						OK
						OUT
					
promise.then(func)与promise.then(func).then(func)是同一个promise吗?
不是,每次调用.then都会返回一个新的Promise

TDZ(1)

					let y = 1;
					function foo(x = function(){console.log(y)}, y = 2) {
					  x(); // ?
					  y = 3;
					  x(); // ?
					}
					foo();
					console.log(y); // ?
				
						2
						3
						1
					

TDZ(2)

				let y = 1;
				function foo(x = function(){console.log(y)}) {
				  let y = 3;
				  x(); // ?
				}
				foo();
				
						1
					

TDZ(3)

				function foo(x = function(){console.log(y)}) {
				  let y = 3;
				  x(); // ?
				}
				foo();
				
						ReferenceError: y is not defined
					

其他

webpack与FIS的区别

webpack是javascript应用的模块化打包工具。

FIS是以单文件为中心,对每个文件分编译、打包、发布三个大的阶段进行处理的工程构件工具。

webpack的loader与plugin的区别?

loader主要是对资源文件的转换(比如CSS预处理文件,)。

plugin是webpack的基石,webpack本身也是基于这套plugin系统构建的。

浏览器的缓存是如何工作的?
何时使用git rebase?

git pull --rebase

merge操作会生成一个新的节点,之前的提交分开显示。而rebase操作不会生成新的节点,是将两个分支融合成一个线性的提交。使用rebase可以得到更好的提交树。