原型链继承

class Animal {
    constructor(name){
        this,name=name;
    }
    speak(){
        console.log(this.name+’a’);
    }
}
class Dog extends Animal {
    constructor(name){
    super(name);
    }
    speak(){
        console.log(this.name+’  b’);
    }
}
let d = new Dog(“c”)
d.speak();  //c  b

 

关于浏览器和HTML页面代码的一些联系：

1. 浏览器首先使用HTTP协议或者HTTPS协议，向服务端请求页面

2. 把请求回来的HTML代码经过解析，构建成DOM树

3. 计算DOM树上的CSS属性

4. 最后根据CSS属性对元素逐个进行渲染，得到内存中的位图

5. 一个可选的步骤是对位图进行合成，这会极大的增加后续绘制的速度

6. 合成之后，再绘制到界面上

 

tips:

box-sizing:content-box;是默认的盒子模型大小计算方法。这种情况下CSS设置的height/width是盒子模型内容区域content的宽高，实际大小要受到padding和border-size的影响。实际大小=height/width(内容区域)+padding(上下/左右)+border-size(上下/左右)。

box-sizing:border-box;这种情况下CSS设置的height/width为盒子的实际宽高，如果设置的有padding和border，内容区域会被压缩。盒子实际大小(height/width)=内容区域+padding(上下/左右)+border-size(上下/左右)

盒子模型 (content--->padding--->border)--->margin

---分享是程序员的美德