全尺寸背景图像

1. 全尺寸背景图像（网站上的背景图像始终覆盖整个浏览器窗口）

具体要求：

• 用图像充满整个页面（无空白）
• 根据需要缩放图像
• 在页面上居中图像
• 不引发滚动条

html {
    background: url(img.png) no-repeat center fixed;
    background-size: cover;
}

2. 响应式图像

• 会自动调整已适合屏幕尺寸
• 如果您希望根据需要缩小图像，但需要杜绝放大到大于原始尺寸，请添加如下代码：

img{
    max-width: 100%;
    height: auto;
}

3. 图像黑白效果

img{
    filter: grayscale(100%)
}

4. box-sizing

1. 默认情况下，元素的宽度和高度是这样计算的：

• width + padding + border = 元素的实际宽度
• height + padding + border = 元素的实际高度

这意味着：当设置元素的宽度/高度时，该元素通常看起来比设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）

2. 如果使用 box-sizing: border-box

5. js 函数 Call

使用call()方法，可以编写能够在不同对象上使用的方法

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName
    }
}

var person1 = {
    firstName: "Bill",
    lastName: "Gates"
}

var person2 = {
    firstName: "Steve",
    lastName: "Jobs"
}

person.fullName.call(person1) // 返回"Bill Gates"
person.fullName.call(person2) // 返回"Steve Jobs"

带参数的 call() 方法

var person = {
    fullName: function(city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country
    }
}

var person1 = {
    firstName: "Bill",
    lastName: "Gates"
}


person.fullName.call(person1, "Seattle", "USA") // 返回"Bill Gates,Seattle,USA"

6. js 函数 Apply

apply() 和 call()非常相似

区别：

• call() 分别接收参数
• apply() 接收数组形式的参数

var person = {
    fullName: function(city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country
    }
}

var person1 = {
    firstName: "Bill",
    lastName: "Gates"
}


person.fullName.apply(person1, ["Oslo", "Norway"]) // 返回"Bill Gates,Oslo,Norway"

7. js 函数 Bind

var person = {
    firstName: "Bill",
    lastName: "Gates",
    fullName: function(city, country) {
        return this.firstName + " " + this.lastName 
    }
}

var member = {
    firstName: "Hege",
    lastName: "Nilsen"
}


let fullName = person.fullName.bind(member)
fullName()  // 返回"Hege Nilsen"