- 闭包
闭包是由函数以及创建的函数的词法环境组合而成,这个环境包含了闭包创建时所能访问的所有的局部变量。
实例:
/**
* 闭包的实例
* @param x
* @returns {function(*): *}
*/
function makeAdder(x) {
return function (y) {
return x + y;
}
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2));
console.log(add10(2));
/**
* 使用闭包定义私有的属性和方法
* @type {{decrement, increment, value}}
*/
var Counter = (function () {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return{
increment: function () {
changeBy(1);
},
decrement: function () {
changeBy(-1);
},
value: function () {
return privateCounter;
}
}
})();
console.log(Counter.value());
Counter.decrement();
console.log(Counter.value());
Counter.increment();
console.log(Counter.value());
- display: inline-block怎样消除两个div之间的间隙
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何消除两个div之间的空隙</title>
<style type="text/css">
.parent{
width:600px;
height:200px;
border:2px solid #000;
}
.child{
width: 150px;
height: 100px;
margin: auto;
display: inline-block;
}
.parent>div:nth-child(1){
background: red;
}
.parent>div:nth-child(2){
background: blue;
}
.parent>div:nth-child(3){
background: #539770;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
效果:
- 第一种方法:
当子元素为行内元素时,当然包括行内块元素,这时html中的空格、回车等字符都不被当做一个字符按父元素的font-size值的大小尽行渲染
.parent{
width:600px;
height:200px;
border:2px solid #000;
font-size: 0px;
}
.child{
width: 150px;
height: 100px;
margin: auto;
display: inline-block;
font-size: 14px;
}
- 第二种方式
div不换行,不推荐使用
<div class="parent">
<div class="child"></div><div class="child"></div><div class="child"></div>
</div>