关于BFC,外边距合并，浏览器兼容

2018-03-17 本文已影响0人 jrg_tzc

BFC

BFC是什么

MDN链接:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

我的理解（不重要）

我理解block formatting context为一个属性，会将它的所有子孙元素（除了子孙元素同样为BFC的子孙元素）包裹自身块的边框以内。

生成BFC

许多属性都将会生成BFC，比如说float元素，display为inline-block，position为fixed或absolute。这些属性在生成BFC同时附带其他属性，所以并不推荐单纯为了生成BFC而使用这些属性。最新有display: flow-root是单纯生成BFC，但浏览器兼容性不太好，只兼容Firefox，Chrome，Opera。

用处

要将块内的内容包裹起来。 demo
将普通水平与浮动元素水平区分开。demo

外边距合并

发生情况

相邻元素之间边距
空的块级元素自身的上下外边距
父元素与第一个子元素上边距合并，与最后一个资源下边距合并。

计算

合并时如果两外边距值皆为正，则取最大值为边距。
如果两外边距值皆为负，则取绝对值较大值为边距。
如果两外边距值一正一负，则取两值之和为边。

浏览器兼容

缘由

由于浏览器版本不同，支持的功能也不同，导致页面的兼容性问题。

解决方法与工具

IE可通过条件注释识别语句（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]-->

html5shiv: 用来让IE9版本以下浏览器识别支持HTML5样式的变通方案。
respond.js 用来让IE6-8以及其他低版本浏览器支持CSS3 Media Query的变通方案。
normailize.css 是一些增加CSS的兼容性CSS的声明。
Modernizr 可对浏览器进行特性检测，方便开发时对各种特性进行声明，以解决兼容性问题。
postCSS 一款对CSS进行处理的工具，依赖插件进行操作。出现兼容性问题可使用其插件进行回退。