一些概念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定義類的私有屬性/方法