BFC
- block formatting context
- 块级元素在渲染的时候是怎么样的规则进行布局的
BFC的产生
- 根元素（htnl元素）
- float不为none
- position为absolute或者fixed
- display为inline-block,flex或者inline-flex;
- overflow不为visible
特性
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
- 外边距合并
- 浮动元素对块级元素的影响
BFC
边距合并问题
-父子合并
子元素的margin会合并到祖先元素中
- 自己合并
p标签的自己的内容产生了合并
空的margin上下合并产生了合并
如何解决外边距合并
浏览器兼容
CSS hack写法
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。
BFC是 块级元素格式化块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
- 根元素
- float不为0
- position为absolute或者fixed
- display为inline-block或者inline-flex
- overflow不为visable
BFC可以处理边距合并还有contain float的问题
实现下方链接中的效果，附上预览链接。
(demo)
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 相邻元素合并时的边距取两个元素连接处的外边距较大一方为真实的边距。
- 父子元素合并不仅仅是父子元素，可能会和更上阶的父元素合并，边距取父子元素中的最大值。
- 元素里没有内容时上下margin会产生合并。
- 合并的两部分， 外边距中取最大值的部分
- 在父子元素中给父元素设置Padding或者bording
对兄弟元素添加一个BFC
- demo
什么是 CSS hack？在哪个网站查看标签(属性)的浏览器兼容情况。
- CSS hack是一种编码技术，用于隐藏或显示CSS标记，具体取决于浏览器，版本号或功能。 浏览器对CSS行为有不同的解释，对W3C标准有不同程度的支持。
- 地址
ie6、7的 hack 写法是？
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
如下属性，兼容哪些浏览器？
- inline-block >=ie8
- min-width/min-height >=ie8;
- :before,:after: >=ie8
- div:hover >=ie7
- inline-block >=ie8
- background-size >=ie9
- 圆角 >=ie9
- 阴影 >= ie9
- 动画/渐变 >=ie10
渐进增强和优雅降级分别是什么意思？
- 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
以下工具/名词是做什么的?
-
条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
-
IE Hack
ie hacks 和 css hacks 几乎一致
-
js 能力检测
能力检测，它的目标不是识别特定的浏览器，而是识别浏览器的能力！
-
html5shiv.js
利用createElement() 实现自定义标签
-
respond.js
媒体查询
-
css reset
就是一个css，把默认样式都去掉了
-
normalize.css
reset太暴力了 ，改变其它的样式，使得
-
Modernizr
以前处理兼容针对的是浏览器，把支持的属性放到class上面 在css可以这样写了
-
postCSS
PostCSS是一个软件开发工具，它使用基于JavaScript的插件来自动执行常规CSS操作。
##尽可能多的列举浏览器兼容的处理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
<!--[if lt IE 9]>
<script src="https://oss./html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss./respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!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]-->
来源：http://www./content-4-160851.html
|
