MMKV集成與原理，輕松拿下offer

從事前端開發工作差不多3年了，自己也從一個什么都不懂的小白積累了一定的理論和實踐經驗，并且自己也對這3年來的學習實踐歷程有一個梳理，以供后面來細細回憶品味。

1、為什么選擇學習前端開發？

你可能是因為興趣，完成一個網站、頁面、功能的成就感。你也可能是因為現在前端崗位火爆，就業率高。不管是因為什么，只要找準了目標，學就是了！

問：BFC 與 IFC 區別

BFC 是塊級格式上下文，IFC 是行內格式上下文：

內部的 Box 會水平放置
水平的間距由 margin，padding，border 決定

問：BFC會與float元素相互覆蓋嗎？為什么？舉例說明

不會，因為 BFC 是頁面中一個獨立的隔離容器，其內部的元素不會與外部的元素相互影響，比如兩個 div，上面的 div 設置了 float，那么如果下面的元素不是 BFC，也沒有設置 float，會形成對上面的元素進行包裹內容的情況，如果設置了下面元素為 overflow：hidden；屬性那么就能夠實現經典的兩列布局，左邊內容固定寬度，右邊因為是 BFC 所以會進行自適應。

問：了解box-sizing嗎？

box-sizing 屬性可以被用來調整這些表現:

content-box? 是默認值。如果你設置一個元素的寬為100px，那么這個元素的內容區會有100px 寬，并且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中。
border-box 告訴瀏覽器：你想要設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px，那么這100px會包含它的border和padding，內容區的實際寬度是width減去(border?+ padding)的值。大多數情況下，這使得我們更容易地設定一個元素的寬高。

（2）什么是 BFC

BFC（Block Formatting Context）格式化上下文，是 Web 頁面中盒模型布局的 CSS 渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。

形成 BFC 的條件

五種：

浮動元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 為以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）
HTML 就是一個 BFC

BFC 的特性：

內部的 Box 會在垂直方向上一個接一個的放置。
垂直方向上的距離由 margin 決定
bfc 的區域不會與 float 的元素區域重疊。
計算 bfc 的高度時，浮動元素也參與計算
bfc 就是頁面上的一個獨立容器，容器里面的子元素不會影響外面元素。

（2）問：了解盒模型嗎？

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。 CSS盒模型：標準模型 + IE模型

標準盒子模型：寬度=內容的寬度（content）+ border + padding

低版本IE盒子模型：寬度=內容寬度（content+border+padding），如何設置成 IE 盒子模型

問：說一下你知道的position屬性，都有啥特點？

static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。 ?relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。 ?absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。 ?fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。 sticky：具體是類似 relative 和 fixed，在 viewport 視口滾動到閾值之前應用 relative，滾動到閾值之后應用 fixed 布局，由 top 決定。

問：兩個div上下排列，都設margin，有什么現象？

都正取大
一正一負相加

問：為什么會有這種現象？你能解釋一下嗎

是由塊級格式上下文決定的，BFC，元素在 BFC 中會進行上下排列，然后垂直距離由 margin 決定，并且會發生重疊，具體表現為同正取最大的，同負取絕對值最大的，一正一負，相加

BFC 是頁面中一個獨立的隔離容器，內部的子元素不會影響到外部的元素。

問：清除浮動有哪些方法？

不清楚浮動會發生高度塌陷：浮動元素父元素高度自適應（父元素不寫高度時，子元素寫了浮動后，父元素會發生高度塌陷）

clear清除浮動（添加空div法）在浮動元素下方添加空div,并給該元素寫css樣式：{clear:both;height:0;overflow:hidden;}
給浮動元素父級設置高度
父級同時浮動（需要給父級同級元素添加浮動）
父級設置成inline-block，其margin: 0 auto居中方式失效
給父級添加overflow:hidden 清除浮動方法
萬能清除法 after偽類清浮動（現在主流方法，推薦使用）