## 一、基本概念
盒子模型就是網頁布局中的一種手段，包括邊框（border）、外邊距（margin）、內邊距（padding）、網頁元素（content）、寬（width）、高（height）等元素。
**要點：**
- Margin(外邊距) - **清除邊框外的區域，外邊距是透明的。**
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - **清除內容周圍的區域，內邊距是透明的。**
- Content(內容) - 盒子的內容，顯示文本和圖像。
```
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
.parent {
width: 400px;
height: 400px;
background: #ccc;
}
.child1, .child2 {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 10px solid #000;
background: #f00;
}
```
## 二、盒模型的兩種標準
**要點：**
- 標準模型中盒模型的寬高只是內容（content）的寬高
- IE模型中盒模型的寬高是內容（content）+填充（padding）+邊框（border）的總寬高
## 三、CSS3 box-sizing 屬性
box-sizing 是用于告訴瀏覽器如何計算一個元素的總寬度和總高度
- **標準盒模型 box-sizing: content-box**
<p> width = content width</p>
<p> height = content height</p>
- **IE盒模型 box-sizing: border-box**
<p> width = border + padding + content width</p>
<p> height = border + padding + content height</p>
```
<div class="parent">
<div class="child1 content-box"></div>
<div class="child2 border-box"></div>
</div>
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
```
## 四、margin折疊問題
css2.1盒子模型中規定：
> In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.所有毗鄰的兩個或更多盒元素的margin將會合并為一個margin共享之。毗鄰的定義為：同級或者嵌套的盒元素，并且它們之間沒有非空內容、padding或border分隔。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，所結合成的外邊距稱為折疊外邊距。折疊的結果按照如下規則計算：
1. 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
2. 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
3. 兩個外邊距一正一負時，折疊結果是兩者的相加的和。
**產生折疊的必備條件：margin必須是鄰接的!**
解決嵌套元素產生折疊問題的方法：
- 給父元素設置padding
- 給父元素設置透明border
```
.parent {
/* padding-top:1px; */
border: 1px solid rgba(0,0,0,0);
width: 400px;
height: 400px;
background: #ccc;
}
```
## 五、什么是BFC
### 1、BFC 定義
> BFC（Block formatting context）直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level Box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
**Box：css布局的基本單位**
Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。
Box盒子的類型：
- block-level box : display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context；
- inline-level box : display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
**Formatting Context**
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
### 2、如何創建BFC
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
### 3、BFC的布局規則
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
- 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算。
### 4、BFC的應用場景
**（1）利用BFC避免margin重疊**
- 解決嵌套元素margin重疊，父元素可選擇添加以下樣式之一
```
padding-top:1px;
border: 1px solid rgba(0,0,0,0);
display: inline-block;
display: table;
display: table-caption;
display: flex;
display: inline-flex;
float: left;
position: absolute;
overflow:hidden;
```
- 解決同級相鄰元素margin重疊，任意相鄰元素可選擇添加以下樣式之一
```
display:inline-block;
display:table-caption;
display:inline-flex;
```
**（2）自適應兩欄布局**
- 要點：BFC的區域不會與float box重疊
```
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
.left {
float: left;
width: 200px;
height: 150px;
line-height: 150px;
text-align: center;
font-size: 40px;
background: #00f;
}
.right {
overflow: hidden;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 40px;
background: #f00;
}
```
**（3）清除浮動**
- 當我們不給父節點設置高度，同時給子節點設置了浮動的時候，就會發生高度塌陷，這個時候我們就要清除浮動
- 要點：計算BFC的高度時，浮動元素也參與計算
```
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
.parent {
overflow: hidden;
width: 300px;
border: 5px solid #f00;
}
.child {
float: left;
width:100px;
height: 100px;
border: 5px solid #00f;
}
```
- 前言
- 一、css垂直居中的幾種實現方法
- 二、簡單說一下盒模型，說下如何利用BFC解決外邊距重疊的問題
- 三、說一說產生塌陷的原因以及清除浮動的幾種方法
- 四、偽類和偽元素的區別？聊一下css選擇器的優先級
- 五、css中的過渡和動畫效果了解嗎
- 六、彈性盒模型了解嗎
- 七、簡單說下BOM和DOM的區別
- 八、如何解決瀏覽器的兼容性問題？瀏覽器調優都用到過哪些方法
- 九、之前寫過h5嗎？有遇到過哪些兼容性問題？說下怎么解決的
- 十、h5是如何做移動端適配的？折行的時候如何實現不斷行
- 十一、聊一聊js中實現數組拷貝的常用方法
- 十二、聊聊js中的數據類型，如何用js實現一個對象的深拷貝
- 十三、偽數組和數組的區別？相互轉化的方法有哪些
- 十四、請介紹Js中有哪些循環遍歷的方法，關于數組常用的方法有哪些
- 十五、js中的reduce了解嗎？都用他解決過什么問題
- 十六、事件冒泡和捕獲的執行順序了解嗎？什么是事件委托
- 十七、call和apply的區別是什么？caller和callee的區別有哪些
- 十八、javascript中的this都有哪些用法
- 十九、怎么理解js中的原型鏈？如何實現繼承？實現繼承常用的方式有哪些
- 二十、聊一聊js的作用域和作用域鏈
- 二十一、js的閉包了解嗎？閉包的常見用法說一下
- 二十二、setTimeout和setInterval的運行機制了解嗎
- 二十三、函數的柯里化了解嗎？說下函數柯里化應用的場景
- 二十四、用js寫一個ajax的原生實現方法
- 二十五、js如何實現跨域？聊一聊你之前用到過的方法
- 二十六、聊一下cookie、session和token三者的區別及使用
- 二十七、用js實現一下數組去重和排序，有哪些方法可以實現
- 二十八、寫一個方法，統計一下html文檔的元素包括元素的數量
- 二十九、用js實現一個省市級聯效果
- 三十、用js實現一個輪播圖效果，簡單說下原理
- 三十一、請你實現一個大文件上傳和斷點續傳
- 三十二、什么是模塊化開發？談下AMD、CMD、CommonJs和ES6的區別
- 三十三、es6了解嗎？說幾個常見的新特性，set和weakSet的區別是什么
- 三十四、解構賦值的用法了解嗎？如何實現對象和數組的嵌套和重命名
- 三十五、談談你對promise的用法和理解
- 三十六、談談你對es6中的Generator函數的認識
- 三十七、談一下async-await的實現原理
- 三十八、用js實現一下觀察者模式？簡單說一下原理
- 三十九、了解JavaScript中的裝飾器嗎？聊一下JS中的getter與setter的用法
- 四十、聊一下正則表達式里的常見用法