BFC与外边距合并、浏览器兼容问题

BFC(Block Formatting Contex)即块级格式化上下文。当涉及到可视化布局的时候，BFC提供了一个环境，元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

浮动元素，绝对定位元素，非块级盒子的块级容器（例如inline-blocks，table-cells，and table-captions），以及overflow属性值不是“ visible”（visible是overflow的默认值）的块级盒子（视口除外），这些元素就会为他们的内容创建一个BFC。即float为 left/right，overflow为 hidden/auto/scroll，display为 table-cell/table-caption/inline-block，position为 absolute/fixed。

作用：

1.解决margin叠加问题

• 只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠，这时生成新的BFC让元素在不同的BFC中就能解决叠加问题。
  例如：解决垂直方向上兄弟元素的margin重叠，如果相邻兄弟元素不属于同一个BFC，就不会发生margin重叠了；

2.清除浮动。

• BFC可以包含浮动元素，让父元素生成新的BFC就可以包围浮动元素。这样就可以解决因子元素浮动而导致的父元素坍塌的问题。

3.创建自适应布局。

• BFC不会重叠浮动元素。利用该特性可以作为多栏布局的一种实现方式。

02 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

1.在什么场景下会出现外边距合并？

• 同一文档流中的两个相邻块级元素，会出现外边距合并。
• 上下两个块级元素
• 父子元素的外边距合并
• 空元素外边距会合并

2.如何合并？

• 元素自身叠加，当元素没有内容（即空元素）、内边距、边框时， 它的上下边距就相遇了， 即会产生叠加（垂直方向）。 当为元素添加内容、 内边距、 边框任何一项， 就会取消合并。
• 相邻元素叠加 相邻的两个元素， 如果它们的上下边距相遇，即会产生合并。
• 包含（父子）元素叠加 包含元素的外边距隔着 父元素的内边距和边框， 当这两项都不存在的时候， 父子元素垂直外边距相邻，产生叠加。添加任何一项即会取消合并。
• 两个元素之间margin发生合并，两者距离以较大的
  (绝对值)值为准。（考虑到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 渐进增强和优雅降级分别是什么意思？

• 渐进增强(progressive enhancement):

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

• 优雅降级 (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来检测浏览器拥有的能力而不是来区分是什么浏览器。这样如果浏览器拥有某种能力则提供一种方案，没有某种能力则提供另一种方案。

html5shiv.js
针对不支持HTML5标签的浏览器，创建并模拟HTML5的标签的效果并使相应的CSS生效。

respond.js
为不支持CSS3媒体查询的浏览器(IE6-8)模拟CSS3的媒体查询。

css reset
清除浏览器默认的元素样式。

normalize.css
保护有用的浏览器默认样式；一般化的样式，修复浏览器自身的bug并保证各浏览器的一致性；优化CSS可用性。

Modernizr
是一个JS类库，用来检测浏览器的CSS3和HTML5能力，从而解决浏览器的兼容问题。

postCSS
它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码

07 尽可能多的列举浏览器兼容的处理范例

- 条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。






使用了条件注释的页面在 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有效等等

- 条件注释结合类选择器整体优化