前端面试题之CSS（四)
BFC 是什么？如何生成 BFC？有什么特性？BFC 有什么作用？举例说明
-
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
-
1.根元素的产生
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block,flex,或者inline-flex;
5.overflow不为visible; -
1.内部的box会在垂直方向，一个接一个地放置
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠
4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
5.计算BFC的高度时，浮动元素也参与计算。
-
1.解决margin合并
header元素上面的那条间距，是h1有外边距，h1与header产生外边距合并的结果。
解决方法：
生成BFC
代码：http://js.jirengu.com/wawoz/1/edit?html,css,output
2.contain float
我们给nav设置背景色，却没有显示颜色，因为子元素 li浮动，导致父元素nav高度塌陷,所以我们要清除浮动。
解决方法：
image.png
代码：http://js.jirengu.com/nede/1/edit
什么是 CSS hack？在哪个网站查看标签(属性)的浏览器兼容情况
-
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
参考资料 ：饥人谷 CSS HACK -
can i use
ie6、7的 hack 写法是？
常见hack写法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
常见兼容处理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
<!--[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]-->
<!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]-->
如下属性，兼容哪些浏览器？
使用http://caniuse.com/查询浏览器兼容
- inline-block: >=ie8
image.png
- min-width/min-height: >=ie8
image.png
- :before,:after:>=ie8
image.png
-
div:hover:>=ie7
image.png
- background-size: >=ie9
image.png
- 圆角:>= ie9
image.png
- 阴影: >= ie9
image.png
image.png
- 动画/渐变: >= ie10
image.png
image.png
css reset 是什么？css 预编译器是什么？ 后编译器(post css)是什么?
css reset就是去除一些浏览器默认样式
它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题
语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
从这里了解postcss(https://segmentfault.com/a/1190000003909268)
PostCSS 就是最近被推荐的一个样式处理工具。PostCSS 旨在通过自定义的插件和工具生态体系来重新定义 CSS。与类似 Sass 和 LESS 这样的预处理机制类似，它可以把扩展的语法和功能转换成现代的浏览器友好的 CSS 代码。
post css :PostCSS 可以直观的理解为：它就是一个平台
PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。
它能够为 CSS 提供额外的功能；
通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer
我们能够使用JavaScript来开发插件（这点对前端来说很重要）
参考资料：css reset
