做題遇到的問題1

1.BFC

之前都不知道這是什麼，今天看到一個筆試題

BFC的概念：

1.規範解釋

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。

2.通俗理解

1. BFC 是一個獨立的佈局環境,可以理解爲一個容器,在這個容器中按照一定規則進行物品擺放,並且不會影響其它環境中的物品
2. 如果一個元素符合觸發 BFC 的條件，則 BFC 中的元素佈局不受外部影響
3. 浮動元素會創建 BFC，則浮動元素內部子元素主要受該浮動元素影響，所以兩個浮動元素之間是互不影響的

---

創建 BFC

1. 根元素或包含根元素的元素
2. 浮動元素 float ＝ left | right 或 inherit（≠ none）
3. 絕對定位元素 position ＝ absolute 或 fixed
4. display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
5. overflow ＝ hidden | auto 或 scroll (≠ visible)

BFC 的特性

1. BFC 是一個獨立的容器，容器內子元素不會影響容器外的元素。反之亦如此。
2. 盒子從頂端開始垂直地一個接一個地排列，盒子之間垂直的間距是由 margin 決定的。
3. 在同一個 BFC 中，兩個相鄰的塊級盒子的垂直外邊距會發生重疊。
4. BFC 區域不會和 float box 發生重疊。
5. BFC 能夠識別幷包含浮動元素，當計算其區域的高度時，浮動元素也可以參與計算了。

2.脫離文檔流之 float 和 position:absolute的區別

所謂的文檔流，指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。
脫離文檔流即是元素打亂了這個排列，或是從排版中拿走。
脫離文檔流的元素有個標誌：沒有實際高度。
脫離文檔流的元素都是塊級元素

1.浮動脫離文檔流(float: left。如讓文字環繞圖片)
使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會爲這個元素讓出位置，環繞在周圍

2.絕對定位脫離文檔流（position:absolute）

3.完全脫離文檔流，相對於瀏覽器窗口進行定位。（相對於瀏覽器窗口就是相對於html）（position:fixed）
總結
使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。
而對於使用absolute :position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它

3.cookies，sessionStorage和localStorage的相同點和不同點？

相同點：都存儲在客戶端(存儲在瀏覽器本地的)

不同點:

• 存儲大小：
  cookies數據大小不能超過4k。
  sessionStorage和localStorage雖然也有存儲大小的限制，但比cookies大得多，可以達到5M或更大。

• 有效時間：
  localStorage存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據。
  cookies設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

• 數據與服務器之間的交互方式：
  cookies數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端。
  sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

4.什麼是Reflow？

瀏覽器的重排（reflow）和重繪 (repaint)

一個頁面由兩部分組成：
DOM：描述該頁面的結構
render：描述 DOM 節點 (nodes) 在頁面上如何呈現

當 DOM 元素的屬性發生變化 (如 color) 時, 瀏覽器會通知 render 重新描繪相應的元素, 此過程稱爲 repaint。

如果該次變化涉及元素佈局 (如 width), 瀏覽器則拋棄原有屬性, 重新計算並把結果傳遞給 render 以重新描繪頁面元素, 此過程稱爲 reflow。

這兩個過程是很耗費瀏覽器性能的, 從 IE 系列和 Chrome 渲染頁面速度上的差距即可看出渲染引擎計算對應值和呈現並不一定高效, 而每次對元素的操作都會發生 repaints 或 reflow, 因此編寫 DOM 交互時如果不注意就會導致頁面性能低下.

下列情況會發生重排

• 頁面初始渲染
• 添加/刪除可見DOM元素
• 改變元素位置
• 改變元素尺寸（寬、高、內外邊距、邊框等）
• 改變元素內容（文本或圖片等）
• 改變窗口尺寸

說到頁面爲什麼會慢？那是因爲瀏覽器要花時間、花精力去渲染，尤其是當它發現某個部分發生了點變化影響了佈局，需要倒回去重新渲染，內行稱這個回退的過程叫reflow。

reflow幾乎是無法避免的。
現在界面上流行的一些效果，比如樹狀目錄的摺疊、展開（實質上是元素的顯示與隱藏）等，都將引起瀏覽器的 reflow。
鼠標滑過、點擊……只要這些行爲引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲染。
通常我們都無法預估瀏覽器到底會reflow哪一部分的代碼，它們都彼此相互影響着。

reflow問題是可以優化的，我們可以儘量減少不必要的reflow。比如開頭的例子中的<img>圖片載入問題，這其實就是一個可以避免的reflow——給圖片設置寬度和高度就可以了。這樣瀏覽器就知道了圖片的佔位面積，在載入圖片前就預留好了位置。

另外，有個和reflow看上去差不多的術語：repaint，中文叫重繪。如果只是改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性，將只會引起瀏覽器repaint。repaint的速度明顯快於 reflow（在IE下需要換一下說法，reflow要比repaint 更緩慢）。下次將通過一系列的實驗說明在Firefox、IE等瀏覽器下reflow的優化。

5.@keyframe

transform

• 旋轉—transform:rotate(180deg) 整數爲順時針旋轉
• 傾斜—transform:skew(60deg)
• 縮放—transform:scale(2.0)
• 位移—transform:translate(X,Y)
• 旋轉點—transform-origin:50% 50%

@keyframes 翻譯過來就是 關鍵幀

@keyframes 動畫名稱{ 
  from {left:0px;} 
  to {left:200px;} 
} 
@keyframes 動畫名稱{ 
  from {transform:rotate(0deg)} 
  to {transform:rotate(360deg)} 
} 

animation語法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation:動畫名稱 5s infinite alternate; 

| 值 | 說明 |
| animation-name | 指定要綁定到選擇器的關鍵幀的名稱 |
| animation-duration | 動畫指定需要多少秒或毫秒完成 |
| animation-timing-function | 設置動畫將如何完成一個週期 |
| animation-delay | 設置動畫在啓動前的延遲間隔。 |
| animation-iteration-count | 定義動畫的播放次數。 |
| animation-direction | 指定是否應該輪流反向播放動畫。 |
| animation-fill-mode | 規定當動畫不播放時
（當動畫完成時或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 |
| animation-play-state | 指定動畫是否正在運行或已暫停。 |
| initial | 設置屬性爲其默認值。 閱讀關於 initial的介紹。 |
| inherit | 從父元素繼承屬性。 閱讀關於 initinherital的介紹。 |

transition

設置旋轉點
transition:50% 50%;
可以參考手冊增加動畫效果和樣式
CSS3手冊

我做了幾個例子，後期會補充
例子鏈接