直译块级格式化上下文。
可以理解为建立一个隐形的边界。
特征：
1.内部box在垂直方向一个接一个放置。
2.作用
1.margin合并
2.包裹
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。
一. BFC 是什么
BFC(Block formatting context)就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
二. 如何生成 BFC
display：flex，display：inline-block，dispaly：inline-flex，display：table-cell，display：table-caption。 这几种中的任意一种。
position为fixed或absolute。
overflow不为visible。
本质上根元素也会生成BFC。
三. BFC 有什么作用
自适应布局
1
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。可以通过触发main生成BFC，来实现自适应两栏布局。
清除内部浮动
计算BFC的高度时，浮动元素也参与计算。
可以触发par生成BFC，那么box在计算高度时，box内部的浮动元素main也会参与计算。
防止垂直 margin 重叠
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
可以在main外面包裹一层容器，并触发该容器生成一个BFC。那么两个main不属于同一个BFC，就不会发生margin重叠了。
总结：其实以上的几个例子都体现了BFC布局规则：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
实现下方链接中的效果，附上预览链接。
http://js.jirengu.com/seqinusena
3
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
##外边距合并遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
##外边距合并场景
兄弟元素合并：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
若外边距为相同的正数时，折叠效果为这个相同的值；若外边距为不同的正数时，折叠效果为两者之间较大的值。
父子间合并：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
自我合并：当一个元素内没有内容是，它的上下边距会产生合并
##如何不让相邻元素外边距合并
父元素加border
给父元素加了边框之后，它们的margin就被边界线隔离开来，就不会发生外边距合并。
它们就会各归各位，父元素有父元素的外边距，子元素有子元素的外边距。
或者设置父元素的padding
给父元素设置了padding之后，也能够阻止父子的外边距相融合，所以也可以防止父子元素的外边距合并。
4.
什么是 CSS hack？在哪个网站查看标签(属性)的浏览器兼容情况。
什么是CSS hack？
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。
caniuse.com 查CSS属性兼容
5.
ie6、7的 hack 写法是？
一. 选择器Hack
/* IE 6 and below */
* html .selector {
样式代码放这里
}
.suckyie6.selector {
样式代码放这里
} /* .suckyie6 can be any unused class */
/* IE 7 and below */
.selector, {
样式代码放这里
}
/* IE 7 */
*:first-child+html .selector {
样式代码放这里
}
.selector, x:-IE7 {
样式代码放这里
}
*+html .selector {
样式代码放这里
}
/* Everything but IE 6 */
html > body .selector {
样式代码放这里
}
/* Everything but IE 6/7 */
html > /**/ body .selector {
样式代码放这里
}
head ~ /* */ body .selector {
样式代码放这里
}
/* Everything but IE 6/7/8 */
:root *> .selector {
样式代码放这里
}
body:last-child .selector {
样式代码放这里
}
body:nth-of-type(1) .selector {
样式代码放这里
}
body:first-of-type .selector {
样式代码放这里
}
二. 属性/属性值 Hack
/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; }
/* IE 6/7 - any combination of these characters:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { !color: blue; }
.selector { $color: blue; }
.selector { &color: blue; }
.selector { *color: blue; }
/* ... */
/* IE 6/7 - acts as an !important */
.selector { color: blue !ie; }
/* string after ! can be anything */
/* IE 6/7/8/9/10 */
.selector { color: blue\9; }
.selector { color/*\**/: blue\9; }
/* Everything but IE 6 */
.selector { color/**/: blue; }
三. 媒体查询Hack
/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; }
/* IE 6/7 - any combination of these characters:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { !color: blue; }
.selector { $color: blue; }
.selector { &color: blue; }
.selector { *color: blue; }
/* ... */
/* IE 6/7 - acts as an !important */
.selector { color: blue !ie; }
/* string after ! can be anything */
/* IE 6/7/8/9/10 */
.selector { color: blue\9; }
.selector { color/*\**/: blue\9; }
/* Everything but IE 6 */
.selector { color/**/: blue; }
媒体查询Hack
/* IE 6/7 */
@media screen\9 {
样式代码放这里
}
/* IE 6/7/8 */
@media \0screen\,screen\9 {
样式代码放这里
}
/* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {
样式代码放这里
}
四. JavaScript Hack
/* IE 6 */
(checkIE = document.createElement("b")).innerHTML = "";
var isIE = checkIE.getElementsByTagName("i").length == 1;
/* IE 7 */
(checkIE = document.createElement("b")).innerHTML = "";
var isIE = checkIE.getElementsByTagName("i").length == 1;
navigator.appVersion.indexOf("MSIE 7.")!=-1
6.
如下属性，兼容哪些浏览器？
inline-block:
min-width/min-height
:before,:afte:
div:hover
inline-block
background-size
圆角
阴影
动画/渐变
inline-block:
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 部分支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
min-width/min-height
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 部分支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
:before,:afte:
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 部分支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
div:hover
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 部分支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
inline-block
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 部分支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
background-size
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 部分支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
圆角
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 不支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
阴影
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 不支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
动画/渐变.
兼容：
IE 11，
Edge 15 16 17，
Firefox 57 58 59 60 61，
Chrome 49 61 62 63 64 65 66 67，
Safari 10.1 11 11.1 TP，
iOSSafari 9.3 10.2 10.3 11.2 11.3，
Opera Mini 不支持，
Chrome for Android 64，
UC Browser for Android 11.4，
Samsung Internet 4 6.2
7.
渐进增强和优雅降级分别是什么意思？
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证 其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或 有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对 象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我 们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被 直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳 并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
8.
以下工具/名词是做什么的？
条件注释
IE Hack
js 能力检测
html5shiv.js
respond.js
css reset
normalize.css
Modernizr
postCSS
条件注释是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。条件注释最初于IE5 浏览器中出现，并且直至IE9均支持。微软已宣布于IE10停止支持。
IE Hack针对IE浏览器的不同版本去写不同的CSS，让它能在这些浏览器中得到我们想要的页面效果。
方法：CSS属性前缀法、IE条件注释法以及选择器前缀法（不常用）。
js 能力检测能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
html5shiv.js主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS样式应用在未知元素上只需执行document.createElement(elementName)即可实现。html5shiv就是根据这个原理创建的。
respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
基础的CSS Reset消除了浏览器提供的HTML元素的不一致的样式。这创造了一个可靠的基础。随着CSS重置加载，写明确的CSS你的项目需要。
注意： CSS Base可以通过为常用HTML元素应用样式基础来补充CSS重置，这与我们的浏览器基线一致。
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。它能够:
保护有用的浏览器默认样式而不是完全去掉它们；
提供统一化的样式：为大部分HTML元素提供统一化的样式；
修复浏览器自身的bug并保证各浏览器的一致性；
优化CSS可用性：用一些小技巧；
解释代码：注释和详细的文档。
Modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
postCSS它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过postCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码。
9.
尽可能多的列举浏览器兼容的处理范例
一. IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
二. 属性前缀法(即类内部Hack)：例如 IE6能识别下划线”_”和星号” “，IE7能识别星号” “，但不能识别下划线”“，IE6~IE10都认识”\9”，但firefox前述三个都不能认识。
常见属性的兼容情况
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67*/
color: yellow\9; /ie/edge 6-8/
}
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67*/
color: yellow\9; /ie/edge 6-8/
}
.clearfix{
zoom: 1; / 仅对ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
三. 利用Modernizr工具
运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。以下是IE9下生成的特征类型。
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">
网友评论