生於憂患死於安樂！已經居家隔離 23 天了，解封以後估計就得找工作了，提前準備起來！需要的趕緊收藏起來

一、談談你對 BFC 的理解及作用。

BFC 是 Block Formatting Context 格式化上下文 的縮寫，就是頁面上一個隔離的獨立容器，容器內的子元素不會影響到外面的元素。有一個獨立的塊級渲染區域，該區域有一套渲染規則來約束盒子的佈局，與外部的區域沒有關係。

1.1、如何建立 BFC

• float 的值不為 none
• position 的值為 absolute 或 fixed
• overflow 的值不為 visible
• display 的值不為 inline-block 、flex、inline-flex

1.2、BFC的特性

• 內部的 box 會在垂直方向，一個接一個的放置。
• box 垂直方向的距離由 margin 決定，屬於同一個 BFC 的兩個相鄰 box 的 margin 會發生重疊
• BFC 的區域不會與浮動區域的 box 重疊
• BFC 在頁面上是一個獨立的容器，外面的元素不會影響 BFC 內的元素，裡面的子元素也不會影響外邊元素。
• 計算 BFC 的高度時，浮動元素也會參與計算

1.3、BFC 的作用

• 取消盒子的 margin 塌陷
• 清除內部浮動，不會影響外面元素，可以阻止元素被浮動元素覆蓋。

二、兩欄佈局，有幾種實現方式？

常見的有 4 種方式，分別為：

• flex 佈局
• grid 佈局
• 聖盃佈局
• 雙飛翼佈局
• 系統的浮動佈局

2.1、使用 flex 佈局

使用 flex 佈局，是目前主流的方式。

實現方式：父容器設定 display:flex，定寬元素設定 width，自適應的子元素設定 flex:1 或 flex-grow:1。

2.2、使用 grid 佈局

實現方式：父級元素設定 display:grid ，使用 grid-template-columns 和 grid-template-rows 設定格子，子項設定 grid-column 和 grid-row 設定在格子中的位置。IE 不支援這種，如果專案需要相容 IE 瀏覽器，就不能選它了。

2.3、聖盃佈局

實現方式：定寬元素和自適應元素都設定左浮，自適應元素設定寬度 100% ,定寬元素設定固定寬度，定寬元素因為 DOM 位置靠後被擠下去，給定寬元素設定 margin-left:-100% 此時定寬元素和自適應元素左側重疊，給容器設定 padding-left 的值為定寬元素寬度，給定寬元素設定定位和固定寬度。

聖盃佈局本質上利用了浮動和負 margin 的特性，同時也有一個要求，自適應元素的寬度最小不能小於固定寬度側邊欄的寬度，否則會出現錯亂。

2.4、雙飛翼佈局

解決了聖盃佈局自適應元素寬度小於固定寬度側邊欄時出現錯亂的問題。

實現方式：給自適應元素內再多加一層 div ，定寬元素和自適應元素都設定左浮，自適應元素寬度 100% ,定寬元素設定寬度，margin-left:-100% ，此時定寬元素和自適應元素左側重疊，給自適應元素內的 div 加 margin 來規避重疊。

2.5、系統的浮動佈局

實現方式：定寬元素左浮或右浮，自適應的元素設定 margin 預留空間，為避免父元素高度塌陷，需要給父級元素加清除浮動。

該方式對 DOM 的結構順序有一定的要求，佈局方式較老，現在基本都不用了。

三、什麼是 css reset ？

它的全稱就是 reset.css ，是一個 css 檔案，用來重置瀏覽器預設的 css 樣式。

reset 被大廠基本都給拋棄了，什麼原因呢？

效能差，使用 resst.css 檔案，會把使用到和使用不到的樣式檔案都載入進來，出現程式碼冗餘，所以被一起企業已經拋棄了。

normalize 與 reset.css 一樣，是一個樣式的重置庫。主要是為了增強跨瀏覽器渲染的一致性。

四、網頁中應該使用奇數還是偶數的字型？為什麼呢？

偶數。

原因：

• 偶數讓文字在瀏覽器上更好看。
• ui 給前端的設計圖一般都是偶數，這樣不管佈局也好，轉換 px 也好，會方便一些。

感興趣了，大家找一個左右對稱的文字，比如"中"、“十”設定一個偶數一個奇數，觀察下。

五、css 優先順序演算法，如何計算？

總結性地回答：

選中且設定 !important 的 > 權重高的 > 權重相同位置靠後的 > 來自繼承的。

如果兩組選擇器都定位到同一元素，且對同一屬性設定不同的樣式，則需要分別計算兩組選擇器的權重來確定優先順序。
一個選擇器的優先順序可以由四部分計算得分：

• 千位：如果宣告在 style 的屬性裡，則該部分得一分。
• 百位：選擇器包含 id 選擇器，則該位得一分。
• 十位：選擇器包含類、屬性選擇器和偽類，則該位得一分。
• 個位：選擇器包含標籤、偽元素選擇器，則該位得一分。

六、css 盒模型是啥？

網頁中每個元素都佔有一定的空間，可以看成盒子，這個盒子的組成有：外邊距、元素的邊框、元素的內邊距、元素的內容，這四個部分一起構成了盒子模型。

css 的盒子模型分為兩種：標準盒子模型和 IE盒子模型。

6.1、兩種盒子模型的區別：

標準盒子模型的內容有：margin、border、padding、content。

它的 width 一般只包含內容，不包含 padding border 和 margin 。盒子的大小會以內容優先，自動擴充套件，子元素可以撐開父元素。

（標準）盒子總寬度 = margin + border + padding + width

IE盒子模型的內容有：margin、content （padding + border + content ）
IE 盒子中子元素無法撐開父元素的盒模型，元素的寬度實際上包含了 content 、padding 和 border 。所以：
（IE）盒子總寬度 = margin + width

6.2、通過 css 如何轉換呢？

使用 box-sizing 屬性可以任意轉換盒子模型。具體的屬性值有：
1、content-box ：定義盒子為標準盒子模型，也是預設值。
2、border-box ：定義盒子為 IE 盒子模型。
3、inherit ：規定從父元素繼承 box-sizing 屬性的值。
通過 box-sizing 屬性，可以將標準盒子模型和 IE 盒子模型之間進行任意轉換。

七、一個盒子不給寬高，水平垂直居中方式有幾種？

共有 6 種方式，分別為：

1. flex 佈局。有兩種實現方式。其中一種實現方式為 display:flex 、align-item:center 和 justify-content:center 。另一種實現方式是 display:flex 和 margin:auto。
2. grid 佈局。有兩種實現方式。其中一種實現方式為 display:grid 、align-item:center 和 justify-content:center 。另一種實現方式是 display:grid 和 margin:auto。
3. table-cell。實現方式為 display:table-cell 、vertical-align:middle 和 text-align:center 。
4. translate + 絕對定位 。實現方式為相對和絕對定位相結合，絕對定位的元素新增 left:50%、 top:50% 和 transform:translate(-50% , -50%)。

八、css 中的單位有哪些？以及它們之間的區別。

css 中的單位有：

px、rpx、em、rem、vw、vh、vmin、vmax、% 。

它們之間的介紹以及區別：

1、px：畫素，是網頁內常用的單位，也是基本單位。常聽到的電腦畫素是 1024*768 ，表示的就是水平方向 1024 個畫素點，垂直方向 768 個畫素點。

2、rpx：是微信小程式解決自適應螢幕尺寸的尺寸單位，微信小程式規定的螢幕寬度為 750rpx 。rpx 單位可以根據螢幕進行自動適應。

3、em：預設字型大小的倍數。1em 的值並不是固定的，需要根據父級元素字型大小確定。

場景1：字型設定 font-size:2em ，字型大小繼承父級元素的字型大小（預設大小是16px）的2倍。

場景2：元素的 width:2em ，這裡預設的字型大小是自身元素的字型大小，所以寬度是自身元素字型大小的 2 倍。

4、rem：是相對於根元素 html 。這就意味著，我們只需要設定根元素字型大小，就可以把整個頁面進行按比例調整。移動端適配這種方法挺常見的。

5、% ：百分比一般來說都是相對於父級元素的。

css 的新單位：

6、vw：view width 的簡寫。 1vw 代表瀏覽器視口寬度的 1% 。如：瀏覽器的寬度為 1200px ，則 1vw = 12px。

7、vh：view height 的簡寫。1vh 代表瀏覽器視口高度的 1% 。如瀏覽器高度 900px ，則 1vh = 9px。

8、vmin：相對單位，當前 vw 和 vh 中較小的一個值 ，其中較小的被分為 100 份 。

9、vmax：當前 vw 和 vh 中較大的一個值 。其中較大的值被分為 100 份。

如瀏覽器視口大小為：1200*900px ，則 1vmax = 900/100 = 1px。相容性差，所以用的比較少。vmin 同理。

九、如何實現 0.5px 邊框？

實現方法有 4 種，分別為：

9.1、利用縮小視覺上是 0.5px 。
實現：給容器設定偽元素，設定絕對定位，寬高是 200% ，邊框為 1px ，然後縮小元素為50%，視覺上實現 0.5px 。
特點：相容性較好，能夠使用圓角，推薦使用。

9.2、利用線性漸變實現。
實現：給容器設定偽元素，設定絕對定位，高度為 1px ，新增背景為線性漸變，一半有顏色，一半沒有顏色，視覺上只有 0.5px 。
特點：適合設定一條邊框，無法展示圓角。

9.3、用陰影實現。
實現：用陰影代替邊框，設定陰影為：box-shadow: 0 0 0 0.5px #000 。
特點：使用方便，也能夠正常展示圓角，但是相容性一般。

9.4、直接設定 box-width:0.5px 。
特點：使用方便，但是相容性差。

十、什麼是響應式影象？

在響應式的流行下，很多 web 應用相容手機平板電腦，其中最頭疼的就是圖片了，不同平臺使用一張高清圖，不但浪費流量，還影響載入速度，所以就有了響應式影象，根據解析度、裝置畫素比、螢幕方向等來載入合適的圖片，在保證圖片清晰的情況下，讓圖片儘可能小。

解決方案：

• 媒體查詢：該方案只適用於根據大小設定不同的背景圖片，對於動態圖片，如 banner 和 產品圖等，處理起來顯的無能為力。
• srcset：可以設定通過不同的 DPR 或者不同的 螢幕解析度，選擇對應的或者大小最接近的圖片。
• sizes：告訴瀏覽器圖片的實際顯示尺寸， html 解析時瀏覽器能夠自動算出需要請求的對應圖片

十一、height 與 line-height 的區別

接下來我們就細細分析下它們之間的區別有哪些？

• 定義不同：line-height 設定每行文字所佔的高度，height 元素自身的高度。就是你理解的行高和高度。
• 同為高度時，表示的意義不同。對於塊級元素，設定 line-height 時，高度會被內容自動撐開，此時 高度 就是行高和幾行內容共同決定的，即：height = line-height * 行數，而 height 設定的是一個固定值，與內容無關。
• 使用物件不同：line-height 一般是針對字型來設定，height 與 line-height 相同時，文字會垂直居中，height 是設定元素高度的。
• 使用範圍不同：line-height 針對有文字的任意元素，height 針對塊級元素，行級元素會失效。
• 數值大小關係：line-height 與 height 同時設定時，它們之間的大小關係，對佈局的影響：line-height = height 時，單行文字居中，多行文字會超出元素範圍。或 line-height > height 時，文字會溢位元素範圍。

十二、css 繪製三角形

繪製三角形在專案中非常常見，總是記不住繪製的時候到底哪個是有顏色的，其他的透明，今天給大家總結一個規律。

下圖是一個大小為0，設定了四個不同顏色的邊框的正方形：

可以歸納出：

方向朝下的三角形，上邊框有顏色，其他三個邊框為透明色。

方向朝上的三角形，下邊框有顏色，其他三個邊框為透明色。

方向朝左的三角形，右邊框有顏色，其他三個邊框為透明色。

方向朝右的三角形，左邊框有顏色，其他三個邊框為透明色。

簡單點就是：朝下上有，朝上下有，朝右左有，朝左右有。

十三、移動端如何適配？

關於移動端適配的常見方案：

• 媒體查詢的方式，即 css3 的 media 。
• flex 或 grid 的彈性佈局。
• viewport 縮放
• 動態 rem 方式
• vw 適配方案

適配方案對比：

1、媒體查詢

該方式比較老，要寫很多的樣式，寫起來麻煩還不好用，基本沒人用了。

2、flex 或 grid 佈局

• 該方案基本不需要適配。
• 常見佈局就是水平排列和兩欄佈局
• 不需要使用 JS

3、viewport縮放方案

• 適配原理簡單
• 需要使用JS
• 直接使用設計稿標註無需換算
• 方案死板只能實現頁面級別整體縮放

4、動態REM方案

• 適配原理稍複雜
• 需要使用JS
• 設計稿標註的px換算到CSS的rem計算簡單
• 方案靈活技能實現整體縮放又能實現區域性不縮放

5、vw方案

• 適配原理簡單
• 不需要JS即可適配
• 設計稿標註的px換算到CSS的vw計算複雜
• 方案靈活技能實現整體縮放又能實現區域性不縮放

實踐是檢驗真理的唯一標準，看完如果不懂的技術手動敲一敲加深印象。

也可以在評論區交流，或者私信小姐姐，歡迎來打擾！