BFC與外邊距合并叛溢、瀏覽器兼容問題

BFC(Block Formatting Contex)即塊級格式化上下文。當涉及到可視化布局的時候，BFC提供了一個環(huán)境穆律，元素在這個環(huán)境中按照一定規(guī)則進行布局。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局导俘。

浮動元素峦耘，絕對定位元素，非塊級盒子的塊級容器（例如inline-blocks趟畏，table-cells贡歧，and table-captions），以及overflow屬性值不是“ visible”（visible是overflow的默認值）的塊級盒子（視口除外）赋秀，這些元素就會為他們的內容創(chuàng)建一個BFC利朵。即float為 left/right，overflow為 hidden/auto/scroll猎莲，display為 table-cell/table-caption/inline-block绍弟，position為 absolute/fixed。

作用：

1.解決margin疊加問題

只有同屬于一個BFC時著洼，兩個元素才有可能發(fā)生垂直Margin的重疊樟遣，這個包括相鄰元素，嵌套元素身笤，只要他們之間沒有阻擋(例如邊框豹悬，非空內容，padding等)就會發(fā)生margin重疊液荸，這時生成新的BFC讓元素在不同的BFC中就能解決疊加問題瞻佛。
例如：解決垂直方向上兄弟元素的margin重疊，如果相鄰兄弟元素不屬于同一個BFC娇钱，就不會發(fā)生margin重疊了伤柄；

2.清除浮動。

BFC可以包含浮動元素文搂，讓父元素生成新的BFC就可以包圍浮動元素适刀。這樣就可以解決因子元素浮動而導致的父元素坍塌的問題。

3.創(chuàng)建自適應布局煤蹭。

BFC不會重疊浮動元素笔喉。利用該特性可以作為多欄布局的一種實現方式取视。

02 在什么場景下會出現外邊距合并？如何合并然遏？如何不讓相鄰元素外邊距合并贫途？給個父子外邊距合并的范例

1.在什么場景下會出現外邊距合并？

同一文檔流中的兩個相鄰塊級元素待侵，會出現外邊距合并丢早。
上下兩個塊級元素
父子元素的外邊距合并
空元素外邊距會合并

2.如何合并？

元素自身疊加秧倾，當元素沒有內容（即空元素）怨酝、內邊距、邊框時那先，它的上下邊距就相遇了农猬，即會產生疊加（垂直方向）。當為元素添加內容售淡、內邊距斤葱、邊框任何一項，就會取消合并揖闸。
相鄰元素疊加相鄰的兩個元素揍堕，如果它們的上下邊距相遇，即會產生合并汤纸。
包含（父子）元素疊加包含元素的外邊距隔著父元素的內邊距和邊框衩茸，當這兩項都不存在的時候，父子元素垂直外邊距相鄰贮泞，產生疊加楞慈。添加任何一項即會取消合并。
兩個元素之間margin發(fā)生合并啃擦，兩者距離以較大的
(絕對值)值為準囊蓝。（考慮到margin為負數時以絕對值大的為準）

3.如何不讓相鄰元素外邊距合并？

border和padding可以不讓父子元素外邊距合并令蛉。
可通過建立BFC可以不讓相鄰元素外邊距合并慎颗。
例子：http://js.jirengu.com/logekijeha/1/edit?html,css,output

03 什么是CSS hack? 在哪個網站查看標簽(屬性)的瀏覽器兼容情況。

不同廠商的瀏覽器或者同一個廠商的瀏覽器的不同版本言询，對CSS的解析認識會有差異，這就會導致頁面產生不一樣的效果傲宜。
所以我們需要針對不一樣的瀏覽器編寫不同的CSS代碼运杭，來實現相同的頁面效果，這個過程就叫做CSS hack函卒。

caniuse.com
CSS hack

04 如下屬性辆憔，兼容哪些瀏覽器？

inline-block:
min-width/min-height
:before,:afte:
div:hover
inline-block
background-size
圓角
陰影
動畫/漸變

inline-block: >=ie8
min-width/min-height: >=ie7
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圓角: >= ie9
陰影: >= ie9
動畫/漸變: >= ie10

05 漸進增強和優(yōu)雅降級分別是什么意思？

漸進增強(progressive enhancement):

針對低版本瀏覽器進行構建頁面虱咧，保證最基本的功能熊榛，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗

優(yōu)雅降級 (graceful degradation):

一開始就構建完整的功能腕巡，然后再針對低版本瀏覽器進行兼容玄坦。

06 以下工具/名詞是做什么的？

條件注釋
IE Hack
js 能力檢測
html5shiv.js
respond.js
css reset
normalize.css
Modernizr
postCSS

條件注釋
這是基于HTML源碼中被IE(IE<=9)有條件解釋的語句绘沉。條件注釋可被用來向IE提供及隱藏代碼煎楣。

IE Hack
針對IE瀏覽器編寫不同的CSS（屬性前綴法、選擇器前綴法车伞、IE條件注釋法）使得頁面效果在不同版本的IE瀏覽器中達到效果一致择懂。

js 能力檢測
使用JS來檢測瀏覽器擁有的能力而不是來區(qū)分是什么瀏覽器。這樣如果瀏覽器擁有某種能力則提供一種方案另玖，沒有某種能力則提供另一種方案困曙。

html5shiv.js
針對不支持HTML5標簽的瀏覽器，創(chuàng)建并模擬HTML5的標簽的效果并使相應的CSS生效谦去。

respond.js
為不支持CSS3媒體查詢的瀏覽器(IE6-8)模擬CSS3的媒體查詢慷丽。

css reset
清除瀏覽器默認的元素樣式。

normalize.css
保護有用的瀏覽器默認樣式哪轿；一般化的樣式盈魁，修復瀏覽器自身的bug并保證各瀏覽器的一致性；優(yōu)化CSS可用性窃诉。

Modernizr
是一個JS類庫杨耙，用來檢測瀏覽器的CSS3和HTML5能力，從而解決瀏覽器的兼容問題飘痛。

postCSS
它可以被理解為一個平臺珊膜，可以讓一些插件在上面跑，它提供了一個解析器宣脉，可以將CSS解析成抽象語法樹车柠，通過PostCSS這個平臺，我們能夠開發(fā)一些插件塑猖，來處理CSS竹祷。熱門插件如autoprefixer，它可以幫我們處理兼容問題羊苟，只需正常寫CSS塑陵，autoprefixer可以幫我的自動生成兼容性代碼

07 盡可能多的列舉瀏覽器兼容的處理范例

- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼蜡励。

<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作令花，但在 Internet Explorer 10 中無法正常工作阻桅。

- 屬性前綴法
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}

- 選擇器前綴法
html 前綴只對IE6生效
+html +前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等

- 條件注釋結合類選擇器整體優(yōu)化

<!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]--

- 利用Modernizr工具
運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性兼都，支持的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets）嫂沉，不支持的特性顯示的class是“no-特性名稱”。以下是IE9下生成的特征類型扮碧。

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

可以直接使用Modernizr在元素里生成的class名稱趟章，在你的css文件里定義相應的屬性以便支持當前瀏覽器。例如芬萍，下面的代碼可以屬性尤揣，在支持shadow陰影的瀏覽器顯示shadow，不支持的瀏覽器顯示標準的邊框：

.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}

BFC與外邊距合并、瀏覽器兼容問題

BFC與外邊距合并烦周、瀏覽器兼容問題

02 在什么場景下會出現外邊距合并？如何合并然遏？如何不讓相鄰元素外邊距合并贫途？給個父子外邊距合并的范例

03 什么是CSS hack? 在哪個網站查看標簽(屬性)的瀏覽器兼容情況。

04 如下屬性辆憔，兼容哪些瀏覽器？

05 漸進增強和優(yōu)雅降級分別是什么意思？

06 以下工具/名詞是做什么的？

07 盡可能多的列舉瀏覽器兼容的處理范例