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提供及隐藏代码。
<!--[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有效等等
- 条件注释结合类选择器整体优化
<!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;
}
网友评论