面試中常見知識點總結

BFC

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

Formatting context

Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

哪些元素會生成BFC?

根元素
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible

BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算。(清除浮動)

==========

FOUC

Flash Of Unstyled Content 無樣式內容閃爍

什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

什麼是FOUC(文檔樣式短暫失效)?
若是使用import方法對CSS進行導入,會致使某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content),簡稱爲FOUC。

緣由大體爲：
1，使用import方法導入樣式表。
2，將樣式表放在頁面底部
3，有幾個樣式表，放在html結構的不一樣位置。

其實原理很清楚：當樣式表晚於結構性html加載，當加載到此樣式表時，頁面將中止以前的渲染。
此樣式表被下載和解析後，將從新渲染頁面，也就出現了短暫的花屏現象。

解決方法：
使用LINK標籤將樣式表放在文檔HEAD中。

語義化的HTML

是表現與結構相分離的一種方式
對搜索引擎友好
標題 列表 段落 表格 使總體結構清晰，主次分明

提升加載速度

減小請求：文件壓縮，圖片合併，
資源GZip
css置頭，js置尾
多域名負載均衡
CDN託管
服務器配置緩存時間

瀏覽器模式

標準模式(strict mode) 採用W3c標準解析
接近標準模式(almost standards mode) 經常使用解析方式 有doctype
混雜模式(quirks mode) 採用自身方式解析 寬鬆兼容 沒有doctype
js判斷
docoment.compatMode=='strict'
docoment.compatMode=='quirks'

data-的好處：

提供自定義的屬性
對象的dataset屬性獲取
經過 getAttribute方法獲取

css reset的好處：

重置瀏覽器的CSS默認屬性 使每一個瀏覽器的默認樣式顯示一致

待續....