BFC &边距合并& 浏览器兼容

2017-12-03 本文已影响0人礼知白

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

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

BFC由以下之一创建：

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素元素具有position为 absolute 或 fixed)
内联块 (元素具有display: inline-block)
表格单元格元素具有 [display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有display: table-caption, HTML表格标题默认属性)
具有overflow且值不是 visible 的块元素
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all的元素并不被包裹在一个多列容器中。

作用：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。计算BFC的高度时，浮动元素也参与计算。可用于决定块盒子的布局及浮动相互影响范围的一个区域。

1. margin合并

对于三个段落，设置了margin: 40px;由于margin合并，实际显示间距为40px，为段落一的父元素创建BFC，即使段落一在一个隔离的容器内，段落一和段落二的margin不再合并。
由于创建BFC需要添加新的属性，有可能会影响到内容效果，设置元素间距可用margin-top: ;。

2. 浮动控制

初始：蓝色框和灰色框上下排列，撑开父容器box；
给蓝色框添加float: left;：设置浮动，创建BFC，灰色框上移并无视蓝色框并部分叠加，灰色框并没有创建BFC，其里面的元素<p>2</p>和黑色方框被蓝色框挤到右边。同时由于蓝色框浮动，发生高度坍塌；
给蓝色框和灰色框的父元素添加overflow: hidden;：创建BFC，计算BFC的高度时，浮动元素也参与计算，高度发生变化。
给灰色框添加overflow: hidden;：创建BFC，BFC就是页面上的一个隔离的独立容器，绿色框与灰色框不发生重叠，黑色框也不受绿色框的影响了。

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

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距。
合并规则：

两个margin都是正值的时候，取两者的最大值；
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
所有毗邻的margin要一起参与运算，不能分步进行。

有三种情况：

1. 相邻的兄弟姐妹元素

毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动)。例如：

  <p style="margin-bottom: 30px;">这个段落的下外边距被合并</p>
  <p style="margin: 20px 0;">这个段落的上下外边距被合并</p>

可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的求和，而是两者中的较大者（在此示例中为30px）。

2. 块级父元素与其第一个/最后一个子元素__

如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
类似的，若块级父元素的 margin-bottom与它的最后一个子元素的margin-bottom 之间没有父元素的border、padding、inline content、height、min-height、max-height分隔时，就会发生下外边距合并现象。

3.空块元素

如果存在一个空的块级元素，其 border、padding、inline content、height
、min-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：

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

CSS hack

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

CSS Hack大致有3种表现形式

属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

实用网站

浏览器份额百度流量查询
查询浏览器是否兼容 Can I use
查 Hack 的写法 browserhacks

ie6、7的 hack 写法是？

属性前缀法(即类内部Hack)：
例如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

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

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