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进行缩放。
发表回复