一、簡單介紹使用圖片 base64 編碼的優點和缺點。
base64是一種圖片處理格式，通過特定的算法將圖片編碼為一長串字符串，在頁面顯示的時候，可以使用該字符串來代替圖片的url屬性。
使用base64的優點:
? ? ? ? 減少一個圖片的http請求
使用base64的缺點:??
（1）根據base64的編碼原理，編碼后的大小會比原文件大小大1/3，如果把大圖片編碼到html/css中，不僅會造成文件體積的增加，影響文件的加載速度，還會增加瀏覽器對html或css文件解析渲染的時間。
（2）使用base64無法直接緩存，要緩存只能緩存包含base64的文件，比如HTML或者CSS，這相比域直接緩存圖片的效果要差很多。
（3）兼容性的問題，ie8以前的瀏覽器不支持。
對于網站的小圖標而言，可以使用base64圖片來代替。
資料參考:
《玩轉圖片 base64 編碼》
https://www.cnblogs.com/coco1s/p/4375774.html
《前端開發中，使用 base64 圖片的弊端是什么？》
《小 tip:base64:URL 背景圖片與 web 頁面性能優化》
二、'display'、'position'和'float'的相互關系？
（1）首先我們判斷display屬性是否為none，如果為none，則position和float屬性的值不影響元素最后的表現。
（2）然后判斷position的值是否為absolute或者fixed，如果是，則float屬性失效，并且display的值應該被
設置為table或者block，具體轉換需要看初始轉換值。（3）如果position的值不為absolute或者fixed，則判斷float屬性的值是否為none，如果不是，則display
的值則按上面的規則轉換。注意，如果position的值為relative并且float屬性的值存在，則relative相對
于浮動后的最終位置定位。（4）如果float的值為none，則判斷元素是否為根元素，如果是根元素則display屬性按照上面的規則轉換，如果不是，則保持指定的display屬性值不變。
? ?總的來說，可以把它看作是一個類似優先級的機制，"position:absolute"和"position:fixed"優先級最高，有它存在
的時候，浮動不起作用，'display'的值也需要調整；其次，元素的'float'特性的值不是"none"的時候或者它是根元素的時候，調整'display'的值；最后，非根元素，并且非浮動元素，并且非絕對定位的元素，'display'特性值同設置值。資料參考:
《position 跟 display、margincollapse、overflow、float 這些特性相互疊加后會怎么樣？》
三、margin 重疊問題的理解。
相關知識點:
塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合并為單個外邊距，這樣的現象稱為“margin合并”。
產生折疊的必備條件：margin必須是鄰接的!
而根據w3c規范，兩個margin是鄰接的必須滿足以下條件：
?必須是處于常規文檔流（非float和絕對定位）的塊級盒子，并且處于同一個BFC當中。
?沒有線盒，沒有空隙，沒有padding和border將他們分隔開
?都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況
?元素的margin-top與其第一個常規文檔流的子元素的margin-top
?元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
?height為auto的元素的margin-bottom與其最后一個常規文檔流的子元素的margin-bottom
?高度為0并且最小高度也為0，不包含常規文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom
margin合并的3種場景：（1）相鄰兄弟元素margin合并。
解決辦法：
?設置塊狀格式化上下文元素（BFC）（2）父級和第一個/最后一個子元素的margin合并。
解決辦法：
對于margin-top合并，可以進行如下操作（滿足一個條件即可）：
?父元素設置為塊狀格式化上下文元素；
?父元素設置border-top值；
?父元素設置padding-top值；
?父元素和第一個子元素之間添加內聯元素進行分隔。對于margin-bottom合并，可以進行如下操作（滿足一個條件即可）：
?父元素設置為塊狀格式化上下文元素；
?父元素設置border-bottom值；
?父元素設置padding-bottom值；
?父元素和最后一個子元素之間添加內聯元素進行分隔；
?父元素設置height、min-height或max-height。（3）空塊級元素的margin合并。
解決辦法：
?設置垂直方向的border；
?設置垂直方向的padding；
?里面添加內聯元素（直接Space鍵空格是沒用的）；
?設置height或者min-height。
回答:
margin重疊指的是在垂直方向上，兩個相鄰元素的margin發生重疊的情況。
一般來說可以分為四種情形：
第一種是相鄰兄弟元素的marin-bottom和margin-top的值發生重疊。這種情況下我們可以通過設置其中一個元素為BFC來解決。
第二種是父元素的margin-top和子元素的margin-top發生重疊。它們發生重疊是因為它們是相鄰的，所以我們可以通過這一點來解決這個問題。我們可以為父元素設置border-top、padding-top值來分隔它們，當然我們也可以將父元素設置為BFC來解決。
第三種是高度為auto的父元素的margin-bottom和子元素的margin-bottom發生重疊。它們發生重疊一個是因為它們相鄰，一個是因為父元素的高度不固定。因此我們可以為父元素設置border-bottom、padding-bottom來分隔它們，也可以為
父元素設置一個高度，max-height和min-height也能解決這個問題。當然將父元素設置為BFC是最簡單的方法。第四種情況，是沒有內容的元素，自身的margin-top和margin-bottom發生的重疊。我們可以通過為其設置border、padding或者高度來解決這個問題。
四、對 BFC 規范（塊級格式化上下文：block formatting context）的理解？
相關知識點:
塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。
通俗來講
?BFC是一個獨立的布局環境，可以理解為一個容器，在這個容器中按照一定規則進行物品擺放，并且不會影響其它環境中的物品。
?如果一個元素符合觸發BFC的條件，則BFC中的元素布局不受外部影響。創建BFC
（1）根元素或包含根元素的元素
（2）浮動元素float＝left|right或inherit（≠none）
（3）絕對定位元素position＝absolute或fixed
（4）display＝inline-block|flex|inline-flex|table-cell或table-caption
（5）overflow＝hidden|auto或scroll(≠visible)
回答:
BFC指的是塊級格式化上下文，一個元素形成了BFC之后，那么它內部元素產生的布局不會影響到外部元素，外部元素的布局也不會影響到BFC中的內部元素。一個BFC就像是一個隔離區域，和其他區域互不影響。
一般來說根元素是一個BFC區域，浮動和絕對定位的元素也會形成BFC，display屬性的值為inline-block、flex這些屬性時也會創建BFC。還有就是元素的overflow的值不為visible時都會創建BFC。
資料參考:
《深入理解 BFC 和 MarginCollapse》
《前端面試題-BFC（塊格式化上下文）》
五、IFC 是什么？
IFC指的是行級格式化上下文，它有這樣的一些布局規則：
（1）行級上下文內部的盒子會在水平方向，一個接一個地放置。
（2）當一行不夠的時候會自動切換到下一行。
（3）行級上下文的高度由內部最高的內聯盒子的高度決定。資料參考:
《[譯]:BFC 與 IFC》
《BFC 和 IFC 的理解（布局）》
