什麼是CSS盒模型？

css盒子模型又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。

• 標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
• 怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）
• box-sizing:content-box，採用標準模式解析計算，也是預設模式；
• box-sizing:border-box，採用怪異模式解析計算；
• box-sizing:inherit，繼承父級值。

BFC定義及佈局規則

BFC(Block formatting context)直譯為”塊級格式化上下文“。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。

BFC佈局規則：

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

哪些元素會生成BFC

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

清楚浮動的8種方式

• 父級div定義height。
• 父級div定義偽類:after和zoom。（推薦）.clearfix:after{content: “”; display: block;clear: both; }
• 父級div定義overflow:hidden。
• 父級div定義overflow:auto。
• 父級div也浮動，需要定義寬度。
• 父級div定義display:table。
• 結尾處加空div標籤clear:both。
• 結尾處加br標籤clear:both。

css sprite是什麼,有什麼優缺點

概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。

優點：

• 減少HTTP請求數，極大地提高頁面載入速度
• 增加圖片資訊重複度，提高壓縮比，減少圖片大小
• 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

• 圖片合併麻煩
• 維護麻煩，修改一個圖片可能需要從新佈局整個圖片，樣式

隱藏元素的方法及區別

display:none
讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間；
讀屏器不會讀取display: none;元素內容；會造成文件重排。完全不受transition屬性的影響，元素立即消失

visibility:hidden
不會讓元素從渲染樹消失，只會造成本元素的重繪，渲染師元素繼續佔據空間，只是內容不可見；是繼承屬性，子孫節點消失由於繼承了hidden，通過設定visibility: visible;可以讓子孫節點顯式；元素消失的時間跟transition屬性設定的時間一樣，但是沒有動畫效果。

opacity:0

設定height，width等盒模型屬性為0

Position

將元素移出可視區域。這個辦法既不會影響佈局，有能讓元素保持可以操作。
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}