一些概念2(私人笔记)

盒模型

页面渲染时，dom 元素所采用的 布局模型。可经过 box-sizing 进行设置。主要分为 标准盒模型 与 IE盒模型。

根据计算宽高的区域可分为：

• content-box (W3C 标准盒模型)
• border-box (IE 盒模型)
• padding-box (仅Firefox实现过，后来已废除)
• margin-box (浏览器未实现)

<div class = 'box'><div>

.box {
    width:200px;
    height:100px;
    border:1px solid red;
    padding: 10px;
    margin:20px;
    box-sizing: ···;
}
复制代码

以上面的box为例，在标准盒模型(box-sizing: content-box)下，整个div宽度为：200 + (1 + 10 + 20) * 2 = 262px; 内容部分content宽度为200px;

在IE盒模型(box-sizing: border-box)下，整个div宽度为：200 + 20 * 2 = 240px; 内容部分content宽度为200 - (1 + 10) * 2 = 178px。

BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其余元素交互的区域。

下列常见的方式会建立块格式化上下文：

根元素或包含根元素的元素

• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

块格式化上下文包含建立它的元素内部的全部内容。

做用：

1. 让浮动内容和周围的内容等高
2. 外边距塌陷(防止两个元素上下margin合并)

link 与 @import 的区别

• link功能较多，能够定义 RSS，定义 Rel 等做用，而@import只能用于加载 css
• 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
• @import须要 IE5 以上才能使用，link能够使用 js 动态引入，@import不行

ES6 class 类的继承使用

ES6 class 类的继承使用

将如下用 ES6 实现

//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
function Person(name,age) {
    this.name = name;
    this.age=age;
}
Person.prototype.say = function(){
    return "个人名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",88);//经过构造函数建立对象，必须使用new 运算符
console.log(obj.say());//个人名字叫laotie今年88岁了
复制代码

ES6 实现

class Person{//定义了一个名字为Person的类
    constructor(name,age){//constructor是一个构造方法，用来接收参数
        this.name = name;//this表明的是实例对象
        this.age=age;
    }
    say = () => `个人名字叫${this.name},今年${this.age}岁了`
}
var obj=new Person("laotie",88);

console.log(obj.say());
复制代码

理解和使用ES6中的Symbol

理解和使用ES6中的Symbol

应用场景：

• 使用Symbol来做为对象属性名(key)
• 使用Symbol来替代常量
• 使用Symbol定义类的私有属性/方法