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

1、為什么選擇學(xué)習(xí)前端開發(fā)？

你可能是因為興趣，完成一個網(wǎng)站、頁面、功能的成就感。你也可能是因為現(xiàn)在前端崗位火爆，就業(yè)率高。不管是因為什么，只要找準(zhǔn)了目標(biāo)，學(xué)就是了！

問：BFC 與 IFC 區(qū)別

BFC 是塊級格式上下文，IFC 是行內(nèi)格式上下文：

• 內(nèi)部的 Box 會水平放置
• 水平的間距由 margin，padding，border 決定

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

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

問：了解box-sizing嗎？

box-sizing 屬性可以被用來調(diào)整這些表現(xiàn):

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

（2）什么是 BFC

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

形成 BFC 的條件

五種：

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

BFC 的特性：

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

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

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

標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding

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

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

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

問：兩個div上下排列，都設(shè)margin，有什么現(xiàn)象？

• 都正取大
• 一正一負(fù)相加

問：為什么會有這種現(xiàn)象？你能解釋一下嗎

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

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

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

不清楚浮動會發(fā)生高度塌陷：浮動元素父元素高度自適應(yīng)（父元素不寫高度時，子元素寫了浮動后，父元素會發(fā)生高度塌陷）

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

更多面試題

**《350頁前端校招面試題精編解析大全》**內(nèi)容大綱主要包括 HTML，CSS，前端基礎(chǔ)，前端核心，前端進(jìn)階，移動端開發(fā)，計算機基礎(chǔ)，算法與數(shù)據(jù)結(jié)構(gòu)，項目，職業(yè)發(fā)展等等

資料獲取方式：點擊藍(lán)色傳送門免費獲取

(https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**

[外鏈圖片轉(zhuǎn)存中…(img-GqJsTgnU-1622807274200)]

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的MMKV集成与原理，轻松拿下offer的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。