共计 4576 个字符，预计需要花费 12 分钟才能阅读完成。
CSS 篇主要从 CSS 兼容、CSS3 新特性、CSS 选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对 HTML 知识点感兴趣，可移步至：知识整理之 HTML 篇
CSS Hack
CSS Hack 就是针对不同的浏览器或不同版本浏览器写特定的 CSS 样式达到让浏览器兼容的过程。CSS Hack 常见的有三种形式：CSS 属性 Hack、CSS 选择符 Hack 以及 IE 条件注释 Hack。
CSS 属性 Hack(在标准模式下)
color: red; /* 所有浏览器识别 */
_color: red; /* 仅 IE6 浏览器识别 */
-color: red; /* 仅 IE6 浏览器识别 */
*color: red; /* 仅 IE6、IE7 浏览器识别 */
+color: red; /* 仅 IE6、IE7 浏览器识别 */
*+color: red; /* 仅 IE6、IE7 浏览器识别 */
#color: red; /* 仅 IE6、IE7 浏览器识别 */
color: red\0; /* 仅 IE8-IE10 浏览器识别 */
color: red\9\0; /* 仅 IE9、IE10 浏览器识别 */
color: red!important; /* 仅 IE6 浏览器不支持 */
CSS 选择符 Hack
*html #demo {color: red;} /* 仅 IE6 浏览器识别 */
*+html #demo {color: red;} /* 仅 IE6、IE7 浏览器识别 */
body:nth-of-type(1) #demo {color: red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo {color: red;} /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo {color: red9;} /* 仅 IE9 识别 */
IE 条件注释 Hack
<!–[if IE]> 此处内容只有 IE 可见 <![endif]–>
<!–[if IE6]> 此处内容只有 IE6.0 可见 <![endif]–>
<!–[if !IE 7]> 此处内容只有 IE7 不能识别，其他版本都能识别，当然要在 IE5 以上。<![endif]–>
<!–[if gt IE 6]> IE6 以上版本可识别,IE6 无法识别 <![endif]–>
<!–[if gte IE 7]> IE7 以及 IE7 以上版本可识别 <![endif]–>
<!–[if lt IE 7]> 低于 IE7 的版本才能识别，IE7 无法识别。<![endif]–>
<!–[if lte IE 7]> IE7 以及 IE7 以下版本可识别 <![endif]–>
<!–[if !IE]> 此处内容只有非 IE 可见 <![endif]–>
常见浏览器兼容性问题与解决方案？
不同浏览器的标签默认的 padding 和 margin 不同
问题症状：常用标签，不加样式控制的情况下，各自的 margin、padding 差异较大。解决方案：
* {
margin: 0;
padding: 0;
}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的 CSS 文件开头都会用通配符 * 来设置各个标签的 margin、padding 是 0。
块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大
问题症状：常见症状是 IE6 中后面的一块被顶到下一行。解决方案：在 float 的标签样式中设置
#demo {display: inline}
当标签的高度设置小于 10px，在 IE6、IE7 中会超出自己设置的高度
问题症状：IE6、7 和遨游里这个标签的高度不受控制，超出自己设置的高度。解决方案：给超出高度的标签设置
#demo {overflow: hidden;}
/* 或者 */
#demo {line-height: 8px;} /* 假设标签高度为 9px */
行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况，IE6 间距 bug
问题症状：IE6 里的间距比超过设置的间距解决方案：
#demo {
display: block;
display: inline;
display: table;
}
备注：行内属性标签，为了设置宽高，我们需要设置 display:block;(除了 input 标签比较特殊)。在用 float 布局并有横向的 margin 后，在 IE6 下，他就具有了块属性 float 后的横向 margin 的 bug。不过因为它本身就是行内属性标签，所以我们再加上 display:inline 的话，它的高宽就不可设了。这时候我们还需要在 display:inline 后面加入 display:talbe。
图片默认有间距
问题症状：几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。解决方案：
img {float: left;}
备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度，img 标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。去掉这个间距使用 float 是正道。
IE9 一下浏览器不能使用 opacity
解决方案：
#demo {
opacity: 0.5;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
CSS 盒子模型：由四个属性组成的外边距 (margin)、内边距 (padding)、边界 (border)、内容区 (width 和 height)
盒子模型有两种，IE 盒子模型、W3C 盒子模型
IE 盒子模型宽高 = 内边距﹢边界﹢内容区
标准盒子模型宽高 = 内容区宽高
css 设置方法
/* 标准盒模型 */
box-sizing: content-box;
/* IE 盒模型 */
box-sizing: border-box;
/* 继承父元素 */
box-sizing: inherit;
对 BFC 规范的理解？
什么是 BFC
BFC（Block Formatting Context）即“块级格式化上下文”。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把 BFC 想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。
BFC 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context 提供了一个环境，HTML 元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说 BFC 就是一个作用范围。
形成 BFC 的条件
浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC 的特性
内部的 Box 会在垂直方向上一个接一个的放置
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素
具体特性解释，可移步至 CSS 中的 BFC 详解
什么是 FOUC？如何来避免 FOUC？
什么是外边距重叠？重叠的结果是什么？
解释下什么是浮动和它的工作原理？
什么是浮动？
非 IE 浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
工作原理
浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者其他浮动元素的边框停留
如何清除浮动
1. 给浮动元素的父元素添加高度（扩展性不好）
如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置 height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如 img 图片），实际当中此方法用的比较多。
2. clear:both
在最后一个子元素新添加最后一个冗余元素，然后将其设置 clear:both, 这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。
<style>
#wrap{
border: 1px solid;
}
#inner{
float: left;
width: 200px;
height: 200px;
background: pink;
}
</style>
<div id=”wrap”>
<div id=”inner”></div>
<div style=”clear: both;”></div>
</div>
3. 伪元素清除浮动
上面那种办法固然可以清除浮动，但是我们不想在页面中添加这些没有意义的冗余元素，此时如何清除浮动吗？结合 :after 伪元素和 IEhack，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
<style>
#wrap {
border: 1px solid;
}
#inner {
float: left;
width: 200px;
height: 200px;
background: pink;
}
.clearfix {
*zoom: 1;
}
/*ie6 7 不支持伪元素 */
.clearfix:after {
content: ”;
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden; /* 允许浏览器渲染它，但是不显示出来 */
}
</style>
<div id=”wrap” class=”clearfix”>
<div id=”inner”></div>
</div>
4. 给父元素使用 overflow:hidden
这种方案让父容器形成了 BFC（块级格式上下文），而 BFC 可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。
设置 zoom:1 清除浮动原理?
触发 hasLayout，清除浮动。
zoom 属性是 IE 浏览器的专有属性，它可以设置或检索对象的缩放比例。解决 ie 下比较奇葩的 bug。譬如外边距（margin）的重叠，浮动清除，触发 ie 的 haslayout 属性等。
原理：当设置了 zoom 的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变 zoom 值时其实也会发生重新渲染，运用这个原理，也就解决了 ie 下子元素浮动时候父元素不随着自动扩大的问题。
zoom 属是 IE 浏览器的专有属性，火狐和老版本的 webkit 核心的浏览器都不支持这个属性。然而，zoom 现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。
目前非 ie 由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？可以通过 css3 里面的动画属性 scale 进行缩放。
