淺談BFC

Box 是 CSS 佈局的對象和基本單位， 直觀點來講，就是一個頁面是由不少個 Box 組成的。元素的類型和 display屬性，決定了這個 Box 的類型。 不一樣類型的 Box， 會參與不一樣的 Formatting Context（一個決定如何渲染文檔的容器），所以Box內的元素會以不一樣的方式渲染。
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁?面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做?用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
　BFC佈局規則：
內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)
BFC的區域不會與float box重疊
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此
計算BFC的高度時，浮動元素也參與計算
IFC(inline formatting context),即行內格式化上下?文，與之對應的是BFC(block formating context),塊格式化上下文，見本博客鋒利的BFC一文。它和BFC同樣，既不是屬性也不是元素，而是一種環境，一種上下文。
IFC不須要觸發
Fliter模糊度0-100，opcity在0-1之間
導航：用於網頁中首頁的導航
語法規則：nav{
border: 1px solid black;
height: 50px;
}
ul{
border: 1px solid red;
overflow: hidden;
/*margin: 0;*/
/*padding: 0;*/
}
li{
list-style: none;
float: left;
padding: 0 20px;
line-height: 50px;
}
CSS3擴展各瀏覽器使用前綴
-webkit-谷歌或蘋果 -o-歐朋 -moz-火狐 -ms-IE9
邊框屬性：border-radius將邊框的直角變爲圓角
Box-shadow：向 div 元素添加 box-shadow，用於管理系統。
h-shadow 必需。水平陰影的位置。容許負值。 v-shadow 必需。垂直陰影的位置。容許負值。 blur 可選。模糊距離。
二、2D轉換
Transform：（translate 偏移，可接負值，方向相反）
（rotate看順時針旋轉，可接負值，方向相反）
（scale按倍數增長/減小元素的尺寸，可接負值，方向相反）
（skew翻轉，）