BFC
一、BFC是什么
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
二、如何形成BFC
-
float属性不设为none -
position属性设为absolute或fixed -
display设为inline-block、table-cell、table-caption、flex或inline-flex -
overflow不设为visible
三、BFC有什么作用
- 避免外边距合并
- 防止正常文档流中元素占据浮动元素位置
- 消除浮动
- 实现自适应布局
外边距合并
一、外边距合会出现在什么场景下
只有在普通文档流中会出现外边距合并，脱离了文档流的不会出现外边距合并。
二、外边距如何合并
- 值均为正或负时，合并绝对值最大的值
- 一正一负时，两值带符号相加
三、如何不让相邻元素外边距合并
- 不同BFC的元素不会发生外边距合并
- 如果是父子关系，父元素设置
padding或border可以阻止外边距合并
消除合并前
消除合并后
CSS hack
一、什么是CSS hack
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
参考网站：饥人谷CSS hack
二、ie6、7的hack怎么写
常见的ie hack写法如下
.box{
color: red;
_color: blue; /* ie6 */
*color: pink; /* ie67 */
color: yellow\9; /* ie/edge 6-8 */
}
<!--[if ie]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->
三、浏览器兼容属性
-
inline-block:>=ie8
-
min-width/min-height:>=ie8
-
:before/:after: >=ie8
-
div:hover: >=ie7
-
background-size: >=ie9
-
圆角: >=ie9
-
阴影: >=ie9
-
动画/渐变: >=ie10
四、渐进增强与优雅降级
- 渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
- 优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
五、名词解释
- 条件注释
IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法，只能用于IE5以上。如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
<!--[if ie]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->
- IE Hack
CSS Hack大致有3种表现形式， CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。 - js能力检测
浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。 - html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。由于IE6-8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。
原理：利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。
使用：考虑到IE9是支持html5的，所以直接在HTML页面的head标签中添加脚本引用即可 - respond.js
让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。 - css reset
将浏览器的默认样式全部去掉，就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。 - normalize.css
normalize.css 是一个可定制的CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的CSS重置样式集。 - Modernizr
Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。它可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
原理：Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。 - postCSS
postCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。它包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个节点树 stringifier。
网友评论