CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇CSS HackCSS 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选择符Hackhtml #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规范的理解？什么是BFCBFC（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-captionoverflow 除了 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进行缩放。