NO1扔亥，BFC 是什么？如何生成 BFC剩蟀？BFC 有什么作用慕趴？舉例說明痪蝇。###
** BFC的定義：**
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域冕房，只有Block-level box參與躏啰， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干耙册。
如何形成：
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
作用：
創(chuàng)建BFC來避免垂直外邊距疊加
創(chuàng)建BFC來清除浮動
創(chuàng)建BFC來實現(xiàn)自適應(yīng)布局
NO2给僵，實現(xiàn)下方鏈接中的效果，附上預(yù)覽鏈接详拙。###
N03, 在什么場景下會出現(xiàn)外邊距合并帝际？如何合并？如何不讓相鄰元素外邊距合并饶辙？給個父子外邊距合并的范例###
- 只有在普通文檔流中會出現(xiàn)外邊距合并蹲诀，脫離了文檔流的不會出現(xiàn)外邊距合并
- a,正數(shù)的情況下合并外邊距最大的數(shù)
b,負數(shù)的情況下合并絕對值最大的數(shù)
c,一正一負的情況下兩數(shù)帶符號相加 -
a,不同BFC的元素不會外邊距合并
b,如果是父子關(guān)系，父元素設(shè)置了padding或邊框也可以阻止父子外邊距合并
image.png
NO4什么是 CSS hack弃揽？在哪個網(wǎng)站查看標(biāo)簽(屬性)的瀏覽器兼容情況脯爪。###
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等矿微，或者是同一廠商的瀏覽器的不同版本痕慢，如IE6和IE7，對CSS的解析認識不完全一樣涌矢，因此會導(dǎo)致生成的頁面效果不一樣掖举，得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS娜庇，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果塔次。
查詢?yōu)g覽器是否兼容 Can I use
NO5，ie6名秀、7的 hack 寫法是励负？###
1.屬性前綴法(即類內(nèi)部Hack)：
例如 IE6能識別下劃線""和星號" "，IE7能識別星號" "泰偿，但不能識別下劃線""，IE6~IE10都認識"\9"蜈垮，但firefox前述三個都不能認識.
color: red;
_color: blue; /*ie6能夠識別*/
*color: pink; /*ie6 ie7能夠識別*/
color: yellow\9; /*ie/edge 6-8*/
}
2.IE條件注釋法(即HTML條件注釋Hack)：
IE10+已經(jīng)不再支持條件注釋.
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
如下屬性耗跛，兼容哪些瀏覽器裕照？###
inline-block:
min-width/min-height
:before,:afte:
div:hover
inline-block
background-size
圓角
陰影
動畫/漸變
| 屬性 | 兼容性查詢 | IE |
|---|---|---|
| inline-block: | http://caniuse.com/#search=inline-block | >=ie8 |
| min-width/min-height | http://caniuse.com/#search=min-width http://caniuse.com/#search=min-height | >=ie8 |
| :before,:after: | http://caniuse.com/#search=%3Abefore http://caniuse.com/#search=%3Aafter | >=ie8 |
| div:hover | http://caniuse.com/#search=%3Ahover | >=ie7 |
| background-size | http://caniuse.com/#search=background-size | >=ie9 |
| 圓角 | http://caniuse.com/#search=border-radius | >=ie9 |
| 陰影 | http://caniuse.com/#search=box-shadow http://caniuse.com/#search=text-shadow | >=ie9 |
| 動畫/漸變 | http://caniuse.com/#search=%40keyframes http://caniuse.com/#search=animation | >=ie10 |
NO6，漸進增強和優(yōu)雅降級分別是什么意思调塌？###
- 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構(gòu)建頁面晋南，保證最基本的功能，然后再針對高級瀏覽器進行效果羔砾、交互等改進和追加功能達到更好的用戶體驗
- 優(yōu)雅降級 (graceful degradation): 一開始就構(gòu)建完整的功能负间，然后再針對低版本瀏覽器進行兼容。
stackoverflow-漸進增強和優(yōu)雅降級的區(qū)別
NO7姜凄， 以下工具/名詞是做什么的政溃？###
** 條件注釋 **
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼态秧。IE10不再支持條件注釋
** IE Hack **
是針對舊IE瀏覽器兼容的特殊寫法
屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線""和星號" "董虱，IE7能識別星號" "，但不能識別下劃線""申鱼，IE6~IE10都認識"\9"愤诱，但firefox前述三個都不能認識
選擇器前綴法(即選擇器Hack)。大致分為三種：
1捐友、屬性前綴法(即類內(nèi)部Hack)
2淫半、選擇器前綴法(即選擇器Hack)
3、IE條件注釋法(即HTML條件注釋Hack)
js 能力檢測
各個版本的瀏覽器有許多不一致性匣砖，和各種怪癖科吭，因此需要用js對瀏覽器是否支持某種特定的能力，做檢測脆粥。確定之后砌溺，就可以給出相關(guān)的方案。
html5shiv.js
針對不支持HTML5標(biāo)簽的瀏覽器（比如ie7变隔、ie8）规伐，創(chuàng)建并模擬HTML5的標(biāo)簽的效果并使相應(yīng)的CSS生效。
respond.js
為不支持CSS3媒體查詢的瀏覽器(IE6-8)（以及其他可能不支持的瀏覽器）模擬CSS3的媒體查詢匣缘。
css reset
現(xiàn)在所使用的主流瀏覽器對一些標(biāo)簽的默認屬性上并沒有做到統(tǒng)一猖闪，所以我們偶爾會發(fā)現(xiàn)，某個頁面在chrome瀏覽器上很正常肌厨，到了firefox上面卻有意想不到的偏差培慌。當(dāng)然編程人員不喜歡這樣的兼容性問題的，而reset.css就是解決默認樣式不兼容問題的辦法之一柑爸。
* {
padding: 0;
margin: 0;
} /*這是最簡化的CSS Reset吵护，會帶來性能問題*/
``
** normalize.css **
Normalize.css是一種CSS reset的替代方案，比起CSS reset直接去掉所有默認樣式，Normalize.css相對平和馅而。
* 保護有用的瀏覽器默認樣式而不是完全去掉它們
* 一般化的樣式：為大部分HTML元素提供
* 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
* 優(yōu)化CSS可用性：用一些小技巧
* 解釋代碼：用注釋和詳細的文檔來
[https://segmentfault.com/a/1190000003021766](https://link.jianshu.com?t=https://segmentfault.com/a/1190000003021766)
**Modernizr**
是一個JS類庫祥诽，用來檢測瀏覽器的CSS3和HTML5能力，從而解決瀏覽器的兼容問題瓮恭。
[https://segmentfault.com/a/1190000003820989](https://link.jianshu.com/?t=https://segmentfault.com/a/1190000003820989)
**postCSS**
PostCSS是一個使用JavaScript插件來轉(zhuǎn)換CSS的工具雄坪。
[http://www.w3cplus.com/preprocessor/postcss-and-crazy-things-you-can-do-with-it.html](https://link.jianshu.com/?t=http://www.w3cplus.com/preprocessor/postcss-and-crazy-things-you-can-do-with-it.html)
####NO8， 盡可能多的列舉瀏覽器兼容的處理范例###
<!DOCTYPE html> /針對ie7/ie8/ie9提供不同的聲明/
<html dir="ltr" lang="en-US" class="no-js">
