BFC 是什么？如何生成 BFC？有什么特性？BFC 有什么作用？舉例說明
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
1.根元素的產(chǎn)生
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block,flex,或者inline-flex;
5.overflow不為visible;-
1.內(nèi)部的box會在垂直方向，一個(gè)接一個(gè)地放置
2.Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā)生重疊每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區(qū)域不會與float box重疊
4.BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
5.計(jì)算BFC的高度時(shí)，浮動元素也參與計(jì)算。
1.解決margin合并
header元素上面的那條間距，是h1有外邊距，h1與header產(chǎn)生外邊距合并的結(jié)果。
解決方法：
代碼：http://js.jirengu.com/wawoz/1/edit?html,css,output
2.contain float
我們給nav設(shè)置背景色，卻沒有顯示顏色，因?yàn)樽釉?li浮動，導(dǎo)致父元素nav高度塌陷,所以我們要清除浮動。
解決方法：
代碼：http://js.jirengu.com/nede/1/edit
什么是 CSS hack？在哪個(gè)網(wǎng)站查看標(biāo)簽(屬性)的瀏覽器兼容情況
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
這個(gè)時(shí)候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
參考資料 ：饑人谷 CSS HACKcan i use
ie6、7的 hack 寫法是？
常見hack寫法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
常見兼容處理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
如下屬性，兼容哪些瀏覽器？
使用http://caniuse.com/查詢?yōu)g覽器兼容
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after:>=ie8
div:hover:>=ie7
- background-size: >=ie9
- 圓角:>= ie9
- 陰影: >= ie9
- 動畫/漸變: >= ie10
css reset 是什么？css 預(yù)編譯器是什么？ 后編譯器(post css)是什么?
css reset就是去除一些瀏覽器默認(rèn)樣式
它們基于 CSS 擴(kuò)展了一套屬于自己的 DSL，來解決我們書寫 CSS 時(shí)難以解決的問題
語法不夠強(qiáng)大，比如無法嵌套書寫導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器；
沒有變量和合理的樣式復(fù)用機(jī)制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護(hù)。
從這里了解postcss(https://segmentfault.com/a/1190000003909268)
PostCSS 就是最近被推薦的一個(gè)樣式處理工具。PostCSS 旨在通過自定義的插件和工具生態(tài)體系來重新定義 CSS。與類似 Sass 和 LESS 這樣的預(yù)處理機(jī)制類似，它可以把擴(kuò)展的語法和功能轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的 CSS 代碼。
post css :PostCSS 可以直觀的理解為：它就是一個(gè)平臺
PostCSS 提供了一個(gè)解析器，它能夠?qū)?CSS 解析成抽象語法樹（AST）。
它能夠?yàn)?CSS 提供額外的功能；
通過在 PostCSS 這個(gè)平臺上，我們能夠開發(fā)一些插件，來處理我們的CSS，比如熱門的：autoprefixer
我們能夠使用JavaScript來開發(fā)插件（這點(diǎn)對前端來說很重要）
參考資料：css reset
