中科大软院春招面试题

最新推荐文章于 2023-10-28 13:09:01 发布

原创最新推荐文章于 2023-10-28 13:09:01 发布 · 909 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float #position #区别 #中科大 #面试题

前端专栏收录该内容

24 篇文章

订阅专栏

好玩的三道题：

function foo(){
var i =0;
  return function(){
  console.log(i++);
  }
}
var foo1 = foo();
var foo2 = foo();
foo1();
foo1();
foo2();
//0 1 0
解析：第一次调用foo1()后，下次不再执行var i= 0了，直接调用return里的函数

html布局：
布局题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
	<style>
	#father{
		width: 300px;
		border: 1px solid red;
	}
	#child1{
		width: 100px;
		height: 100px;
		background: red;
		float: left;
	}
	#child2{
		width: 100px;
		height: 100px;
		background: blue;
		float: left;
	}
	#next{
		width: 300px;
		height: 300px;
		background: yellow;
	}
	</style>
<body>
<div id="father">
<div id = "child1">div1</div>
<div id="child2">div2</div>
</div>
<div id = "next">hello</div>
</body>
<script>
</script>
</html>

注意下hello的位置，思考下为啥？注意最上方的那条红线为啥？

关于hello的位置涉及到position和float的区别：
因为position:absolute是完全脱离文档流，其他盒子与其他盒子内的文本都不会受到影响；而float是一种半脱离状态，被float的元素，文字会环绕到它的旁边。
红线主要是以为子元素浮动，没有撑开父元素，导致父元素“坍塌”成一条线

面试题三、
function f(n){
	n=n||2;
	return function(x){
		return (x*n);
	}
}
var f2 = f(3);
var f3 = f();
console.log(f2(3));
console.log(f3(3));
console.log(f3(f2(3)));

类似题一，debugger试试？