## 一、基本概念
盒子模型就是網(wǎng)頁布局中的一種手段，包括邊框（border）、外邊距（margin）、內(nèi)邊距（padding）、網(wǎng)頁元素（content）、寬（width）、高（height）等元素。
**要點：**
- Margin(外邊距) - **清除邊框外的區(qū)域，外邊距是透明的。**
- Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
- Padding(內(nèi)邊距) - **清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。**
- Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。
```
<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;
}
```
## 二、盒模型的兩種標(biāo)準(zhǔn)
**要點：**
- 標(biāo)準(zhǔn)模型中盒模型的寬高只是內(nèi)容（content）的寬高
- IE模型中盒模型的寬高是內(nèi)容（content）+填充（padding）+邊框（border）的總寬高
## 三、CSS3 box-sizing 屬性
box-sizing 是用于告訴瀏覽器如何計算一個元素的總寬度和總高度
- **標(biāo)準(zhǔn)盒模型 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盒子模型中規(guī)定：
> 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共享之。毗鄰的定義為：同級或者嵌套的盒元素，并且它們之間沒有非空內(nèi)容、padding或border分隔。
在CSS當(dāng)中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，所結(jié)合成的外邊距稱為折疊外邊距。折疊的結(jié)果按照如下規(guī)則計算：
1. 兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
2. 兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
3. 兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。
**產(chǎn)生折疊的必備條件：margin必須是鄰接的!**
解決嵌套元素產(chǎn)生折疊問題的方法：
- 給父元素設(shè)置padding
- 給父元素設(shè)置透明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）直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level Box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
**Box：css布局的基本單位**
Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內(nèi)的元素會以不同的方式渲染。
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 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
### 2、如何創(chuàng)建BFC
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
### 3、BFC的布局規(guī)則
- 內(nèi)部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
- 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區(qū)域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算。
### 4、BFC的應(yīng)用場景
**（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）自適應(yīng)兩欄布局**
- 要點：BFC的區(qū)域不會與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）清除浮動**
- 當(dāng)我們不給父節(jié)點設(shè)置高度，同時給子節(jié)點設(shè)置了浮動的時候，就會發(fā)生高度塌陷，這個時候我們就要清除浮動
- 要點：計算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垂直居中的幾種實現(xiàn)方法
- 二、簡單說一下盒模型，說下如何利用BFC解決外邊距重疊的問題
- 三、說一說產(chǎn)生塌陷的原因以及清除浮動的幾種方法
- 四、偽類和偽元素的區(qū)別？聊一下css選擇器的優(yōu)先級
- 五、css中的過渡和動畫效果了解嗎
- 六、彈性盒模型了解嗎
- 七、簡單說下BOM和DOM的區(qū)別
- 八、如何解決瀏覽器的兼容性問題？瀏覽器調(diào)優(yōu)都用到過哪些方法
- 九、之前寫過h5嗎？有遇到過哪些兼容性問題？說下怎么解決的
- 十、h5是如何做移動端適配的？折行的時候如何實現(xiàn)不斷行
- 十一、聊一聊js中實現(xiàn)數(shù)組拷貝的常用方法
- 十二、聊聊js中的數(shù)據(jù)類型，如何用js實現(xiàn)一個對象的深拷貝
- 十三、偽數(shù)組和數(shù)組的區(qū)別？相互轉(zhuǎn)化的方法有哪些
- 十四、請介紹Js中有哪些循環(huán)遍歷的方法，關(guān)于數(shù)組常用的方法有哪些
- 十五、js中的reduce了解嗎？都用他解決過什么問題
- 十六、事件冒泡和捕獲的執(zhí)行順序了解嗎？什么是事件委托
- 十七、call和apply的區(qū)別是什么？caller和callee的區(qū)別有哪些
- 十八、javascript中的this都有哪些用法
- 十九、怎么理解js中的原型鏈？如何實現(xiàn)繼承？實現(xiàn)繼承常用的方式有哪些
- 二十、聊一聊js的作用域和作用域鏈
- 二十一、js的閉包了解嗎？閉包的常見用法說一下
- 二十二、setTimeout和setInterval的運行機制了解嗎
- 二十三、函數(shù)的柯里化了解嗎？說下函數(shù)柯里化應(yīng)用的場景
- 二十四、用js寫一個ajax的原生實現(xiàn)方法
- 二十五、js如何實現(xiàn)跨域？聊一聊你之前用到過的方法
- 二十六、聊一下cookie、session和token三者的區(qū)別及使用
- 二十七、用js實現(xiàn)一下數(shù)組去重和排序，有哪些方法可以實現(xiàn)
- 二十八、寫一個方法，統(tǒng)計一下html文檔的元素包括元素的數(shù)量
- 二十九、用js實現(xiàn)一個省市級聯(lián)效果
- 三十、用js實現(xiàn)一個輪播圖效果，簡單說下原理
- 三十一、請你實現(xiàn)一個大文件上傳和斷點續(xù)傳
- 三十二、什么是模塊化開發(fā)？談下AMD、CMD、CommonJs和ES6的區(qū)別
- 三十三、es6了解嗎？說幾個常見的新特性，set和weakSet的區(qū)別是什么
- 三十四、解構(gòu)賦值的用法了解嗎？如何實現(xiàn)對象和數(shù)組的嵌套和重命名
- 三十五、談?wù)勀銓romise的用法和理解
- 三十六、談?wù)勀銓s6中的Generator函數(shù)的認(rèn)識
- 三十七、談一下async-await的實現(xiàn)原理
- 三十八、用js實現(xiàn)一下觀察者模式？簡單說一下原理
- 三十九、了解JavaScript中的裝飾器嗎？聊一下JS中的getter與setter的用法
- 四十、聊一下正則表達(dá)式里的常見用法