起點低怕什么，大不了加倍努力。人生就像一場馬拉松比賽，拼的不是起點，而是堅持的耐力和成長的速度。只要努力不止，進步也會不止。
一、談談你對 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 塌陷
- 清除內部浮動，不會影響外面元素，可以阻止元素被浮動元素覆蓋。
二、兩欄布局，有幾種實現方式？
常見的有 5 種方式，分別為：
- 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 選擇器，則該位得一分。
- 十位：選擇器包含類、屬性選擇器和偽類，則該位得一分。
- 個位：選擇器包含標簽、偽元素選擇器，則該位得一分。
面試題：
<style> .box h1#title { color:red } #box h1.title { color:blue } </style> <div id="box" class="box"> <h1 id="title" class="title">愛學習的前端人</h1> </div>
答案是：藍色！
六、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 種方式，分別為：
- flex 布局。實現方式為 display:flex 、align-item:center 和 justify-content:center 。
- flex 布局的另外一種實現方式是 display:flex 和 margin:auto。
- grid 布局其中一種實現方式為 display:grid 、align-item:center 和 justify-content:center 。
- grid 布局另外一種實現方式是 display:grid 和 margin:auto。
- table-cell。實現方式為 display:table-cell 、vertical-align:middle 和 text-align:center 。
- translate + 絕對定位 。實現方式為相對和絕對定位相結合，絕對定位的元素添加 left:50%、 top:50% 和 transform:translate(-50% , -50%)。
八、css 中的單位有哪些？以及它們之間的區別。
css 中的單位共有 15 種。它們可分為兩大類：
絕對長度：cm、mm、in、px、pt、pc。
相對長度：ex、ch、em、rpx、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 同理。
cm、mm、in(英寸)、pt(點)、pc(派卡)這些單位在 CSS 中基本不怎么使用。
九、如何實現 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計算復雜
- 方案靈活技能實現整體縮放又能實現局部不縮放
實踐是檢驗真理的唯一標准，看完如果不懂的技術手動敲一敲加深印象。