NO1，BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明。###
** BFC的定義：**
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
如何形成：
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
作用：
創(chuàng)建BFC來避免垂直外邊距疊加
創(chuàng)建BFC來清除浮動(dòng)
創(chuàng)建BFC來實(shí)現(xiàn)自適應(yīng)布局
NO2，實(shí)現(xiàn)下方鏈接中的效果，附上預(yù)覽鏈接。###
N03, 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例###
- 只有在普通文檔流中會(huì)出現(xiàn)外邊距合并，脫離了文檔流的不會(huì)出現(xiàn)外邊距合并
- a,正數(shù)的情況下合并外邊距最大的數(shù)
b,負(fù)數(shù)的情況下合并絕對(duì)值最大的數(shù)
c,一正一負(fù)的情況下兩數(shù)帶符號(hào)相加 -
a,不同BFC的元素不會(huì)外邊距合并
b,如果是父子關(guān)系，父元素設(shè)置了padding或邊框也可以阻止父子外邊距合并
image.png
NO4什么是 CSS hack？在哪個(gè)網(wǎng)站查看標(biāo)簽(屬性)的瀏覽器兼容情況。###
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
查詢?yōu)g覽器是否兼容 Can I use
NO5，ie6、7的 hack 寫法是？###
1.屬性前綴法(即類內(nèi)部Hack)：
例如 IE6能識(shí)別下劃線""和星號(hào)" "，IE7能識(shí)別星號(hào)" "，但不能識(shí)別下劃線""，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí).
color: red;
_color: blue; /*ie6能夠識(shí)別*/
*color: pink; /*ie6 ie7能夠識(shí)別*/
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
圓角
陰影
動(dòng)畫/漸變
| 屬性 | 兼容性查詢 | 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 |
| 動(dòng)畫/漸變 | http://caniuse.com/#search=%40keyframes http://caniuse.com/#search=animation | >=ie10 |
NO6，漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)分別是什么意思？###
- 漸進(jìn)增強(qiáng)(progressive enhancement): 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
- 優(yōu)雅降級(jí) (graceful degradation): 一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
stackoverflow-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的區(qū)別
NO7， 以下工具/名詞是做什么的？###
** 條件注釋 **
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。IE10不再支持條件注釋
** IE Hack **
是針對(duì)舊IE瀏覽器兼容的特殊寫法
屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線""和星號(hào)" "，IE7能識(shí)別星號(hào)" "，但不能識(shí)別下劃線""，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)
選擇器前綴法(即選擇器Hack)。大致分為三種：
1、屬性前綴法(即類內(nèi)部Hack)
2、選擇器前綴法(即選擇器Hack)
3、IE條件注釋法(即HTML條件注釋Hack)
js 能力檢測(cè)
各個(gè)版本的瀏覽器有許多不一致性，和各種怪癖，因此需要用js對(duì)瀏覽器是否支持某種特定的能力，做檢測(cè)。確定之后，就可以給出相關(guān)的方案。
html5shiv.js
針對(duì)不支持HTML5標(biāo)簽的瀏覽器（比如ie7、ie8），創(chuàng)建并模擬HTML5的標(biāo)簽的效果并使相應(yīng)的CSS生效。
respond.js
為不支持CSS3媒體查詢的瀏覽器(IE6-8)（以及其他可能不支持的瀏覽器）模擬CSS3的媒體查詢。
css reset
現(xiàn)在所使用的主流瀏覽器對(duì)一些標(biāo)簽的默認(rèn)屬性上并沒有做到統(tǒng)一，所以我們偶爾會(huì)發(fā)現(xiàn)，某個(gè)頁面在chrome瀏覽器上很正常，到了firefox上面卻有意想不到的偏差。當(dāng)然編程人員不喜歡這樣的兼容性問題的，而reset.css就是解決默認(rèn)樣式不兼容問題的辦法之一。
* {
padding: 0;
margin: 0;
} /*這是最簡(jiǎn)化的CSS Reset，會(huì)帶來性能問題*/
``
** normalize.css **
Normalize.css是一種CSS reset的替代方案，比起CSS reset直接去掉所有默認(rèn)樣式，Normalize.css相對(duì)平和。
* 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
* 一般化的樣式：為大部分HTML元素提供
* 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
* 優(yōu)化CSS可用性：用一些小技巧
* 解釋代碼：用注釋和詳細(xì)的文檔來
[https://segmentfault.com/a/1190000003021766](https://link.jianshu.com?t=https://segmentfault.com/a/1190000003021766)
**Modernizr**
是一個(gè)JS類庫，用來檢測(cè)瀏覽器的CSS3和HTML5能力，從而解決瀏覽器的兼容問題。
[https://segmentfault.com/a/1190000003820989](https://link.jianshu.com/?t=https://segmentfault.com/a/1190000003820989)
**postCSS**
PostCSS是一個(gè)使用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> /針對(duì)ie7/ie8/ie9提供不同的聲明/
<html dir="ltr" lang="en-US" class="no-js">
