BFC与浏览器兼容

BFC

---

一、BFC是什么

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

二、如何形成BFC

• float属性不设为none
• position属性设为absolute或fixed
• display设为inline-block、table-cell、table-caption、flex或inline-flex
• overflow不设为visible

三、BFC有什么作用

• 避免外边距合并
• 防止正常文档流中元素占据浮动元素位置
• 消除浮动
• 实现自适应布局

外边距合并

---

一、外边距合会出现在什么场景下

只有在普通文档流中会出现外边距合并，脱离了文档流的不会出现外边距合并。

二、外边距如何合并

• 值均为正或负时，合并绝对值最大的值
• 一正一负时，两值带符号相加

三、如何不让相邻元素外边距合并

• 不同BFC的元素不会发生外边距合并
• 如果是父子关系，父元素设置padding或border可以阻止外边距合并
  
  消除合并前
  
  
  消除合并后

CSS hack

---

一、什么是CSS hack

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

二、ie6、7的hack怎么写

常见的ie hack写法如下

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

三、浏览器兼容属性

查询浏览器兼容

1. inline-block:>=ie8
   
   
2. min-width/min-height:>=ie8
   
   
3. :before/:after: >=ie8
   
   
4. div:hover: >=ie7
   
   
5. background-size: >=ie9
   
   

6. 圆角: >=ie9

   
   
   

7. 阴影: >=ie9

   
   
   
   
   
   

8. 动画/渐变: >=ie10

   
   
   
   
   
   

四、渐进增强与优雅降级

1. 渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
2. 优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

五、名词解释

• 条件注释
  IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法，只能用于IE5以上。如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
  条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

• IE Hack
  CSS Hack大致有3种表现形式， CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
• js能力检测
  浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
• html5shiv.js
  用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。由于IE6-8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。
  原理：利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。
  使用：考虑到IE9是支持html5的，所以直接在HTML页面的head标签中添加脚本引用即可
• respond.js
  让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
• css reset
  将浏览器的默认样式全部去掉，就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
• normalize.css
  normalize.css 是一个可定制的CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的CSS重置样式集。
• Modernizr
  Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。它可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
  原理：Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
• postCSS
  postCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。它包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个节点树 stringifier。