2018-04-7 任务10 BFC&边距合并&浏览器兼容

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

BFC全称Block Formatting Context。
每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他的关系和相互作用，在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文。

当一个元素满足下面条件的任何一点，都可以产生Block Formatting Context
根元素
float的值不为none(可以为left、right);
overflow的值不为visible(可以为hidden,scroll,auto);
display的值为inline-block,table-cell,table-caption,flex,`inline-flex中的任何一个；
position的值为absolute,fixed(不为static,relative中的任何一个）；
其中可能会产生的一些问题
display:table——可能会产生一些问题
overflow:scroll——可能会出现一些不必要的滚动条
float:left——将会把元素置于容器的左边，其他元素环绕着它

BFC布局规则：

1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算

BFC的作用及原理

1.自适应两栏布局

     body {
        width: 300px;
        position: relative;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        background: #fcc;
    }

<body>
        <div class="aside"></div>
        <div class="main"></div>
    </body>

效果图：

image

分析：

FBC布局规则1

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此。

因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

FBC布局规则2

BFC的区域不会与float box重叠。

我们可以通过触发main生成BFC，来实现自适应两栏布局。

.main {
    overflow: hidden;
}*/或者利用上述其他方式为它生成 BFC */

效果图：

image

2.清除内部浮动


<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

下图为以上代码效果

image

FBC布局规则3

计算BFC的高度时，浮动元素也参与计算

`为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

代码：

.par {
    overflow: hidden;
}

效果图：

image

3. 防止垂直 margin 重叠

代码：

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

下图为以下代码效果：

image

两个p之间的距离为100px，发送了margin重叠。

FBC布局规则4

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
　　代码：

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

效果图：

image

总结：
其实以上的几个例子都体现了BFC布局规则第五条：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

参考文章：
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

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

5KD8G`NI%312QMQD[)]9BO2.png

出现外边距合并：
1.相邻（兄弟）元素合并
两个元素margin都设置了20px，但是他们之间的距离并不是40px，而是20px，从而发生了合并。

兄弟元素合并

如何不让相邻元素外边距合并：
1.被非空内容、padding、border 或 clear 分隔开。
2.不在一个普通流中或一个BFC中。
3.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）。

2.父子外边距合并：

父子外边距合并

解决外边距合并：

解决合并

合并规则：
1.两个margin都是正值的时候，取两者的最大值；
2.当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
3.当有正有负的时候，先取出负 margin 中绝对值中最大的，然后和正 margin 值中最大的 margin 相加。

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

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

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]–->

如下属性，兼容哪些浏览器？

属性	兼容性查询	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

渐进增强和优雅降级分别是什么意思？

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

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

条件注释

条件注释 (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

Modernizr

是一个JS类库，用来检测浏览器的CSS3和HTML5能力，从而解决浏览器的兼容问题。
https://segmentfault.com/a/1190000003820989

postCSS

PostCSS是一个使用JavaScript插件来转换CSS的工具。
http://www.w3cplus.com/preprocessor/postcss-and-crazy-things-you-can-do-with-it.html

尽可能多的列举浏览器兼容的处理范例

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]--> /*如果浏览器为ie9，则加载里面的两个js文件*/

<!DOCTYPE html> /*针对ie7/ie8/ie9提供不同的声明*/
<!--[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://js.jirengu.com/puqeg/1/