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。
用处
外边距合并
发生情况
- 相邻元素之间边距
- 空的块级元素自身的上下外边距
- 父元素与第一个子元素上边距合并，与最后一个资源下边距合并。
计算
- 合并时如果两外边距值皆为正，则取最大值为边距。
- 如果两外边距值皆为负，则取绝对值较大值为边距。
- 如果两外边距值一正一负，则取两值之和为边。
浏览器兼容
缘由
由于浏览器版本不同，支持的功能也不同，导致页面的兼容性问题。
解决方法与工具
- 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进行处理的工具，依赖插件进行操作。出现兼容性问题可使用其插件进行回退。
网友评论