BFC&边距合并&浏览器

NO1，BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。###

** BFC的定义：**
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
如何形成：

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
作用：
创建BFC来避免垂直外边距叠加
创建BFC来清除浮动
创建BFC来实现自适应布局

NO2，实现下方链接中的效果，附上预览链接。###

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

只有在普通文档流中会出现外边距合并，脱离了文档流的不会出现外边距合并
a,正数的情况下合并外边距最大的数
b,负数的情况下合并绝对值最大的数
c,一正一负的情况下两数带符号相加
a,不同BFC的元素不会外边距合并
b,如果是父子关系，父元素设置了padding或边框也可以阻止父子外边距合并

image.png

NO4什么是 CSS hack？在哪个网站查看标签(属性)的浏览器兼容情况。###

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
查询浏览器是否兼容 Can I use

NO5，ie6、7的 hack 写法是？###

1.属性前缀法(即类内部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+已经不再支持条件注释.
<!–-[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，渐进增强和优雅降级分别是什么意思？###

渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
stackoverflow-渐进增强和优雅降级的区别

NO7，以下工具/名词是做什么的？###

** 条件注释 **
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。IE10不再支持条件注释
** IE Hack **
是针对旧IE浏览器兼容的特殊写法
属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
选择器前缀法(即选择器Hack)。大致分为三种：
1、属性前缀法(即类内部Hack)
2、选择器前缀法(即选择器Hack)
3、IE条件注释法(即HTML条件注释Hack)
js 能力检测
各个版本的浏览器有许多不一致性，和各种怪癖，因此需要用js对浏览器是否支持某种特定的能力，做检测。确定之后，就可以给出相关的方案。
html5shiv.js
针对不支持HTML5标签的浏览器（比如ie7、ie8），创建并模拟HTML5的标签的效果并使相应的CSS生效。
respond.js
为不支持CSS3媒体查询的浏览器(IE6-8)（以及其他可能不支持的浏览器）模拟CSS3的媒体查询。
css reset
现在所使用的主流浏览器对一些标签的默认属性上并没有做到统一，所以我们偶尔会发现，某个页面在chrome浏览器上很正常，到了firefox上面却有意想不到的偏差。当然编程人员不喜欢这样的兼容性问题的，而reset.css就是解决默认样式不兼容问题的办法之一。

* {
padding: 0;
margin: 0;
} /*这是最简化的CSS Reset，会带来性能问题*/
``
** normalize.css **
Normalize.css是一种CSS reset的替代方案，比起CSS reset直接去掉所有默认样式，Normalize.css相对平和。

*   保护有用的浏览器默认样式而不是完全去掉它们
*   一般化的样式：为大部分HTML元素提供
*   修复浏览器自身的bug并保证各浏览器的一致性
*   优化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插件来转换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">