知识整理之CSS篇

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选择器类型，并举例说明用法

类型： 基础选择器、组合选择器、熟悉选择器、伪类、伪元素

基础选择器

基础选择器包含：通用选择器、元素选择器、类选择器、id选择器

组合选择器

组合选择器包含：多元素选择器、后代选择器、子元素选择器、毗邻选择器、相邻选择器

属性选择器

伪类选择器

CSS1-2伪类选择器

CSS3常用伪类选择器

伪元素

伪类与伪元素的区别与作用

CSS3对伪类的定义：

1. 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
2. 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
3. 任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

其实第一段话就囊括CSS3伪类的全部定义了，这段话中指出CSS3伪类的功能有两种：

1. 获取不存在与DOM树中的信息。比如a链接的:link、:actived等，这些信息不存在DOM树结构中，只能通过css选择器来获取。
2. 获取不能被常规CSS选择器获取的信息。比如通过:nth-child(odd)实现选择偶数行设置背景色，如果不是用伪类，而是用JavaScript来设置就复杂得多。通过伪类实现了常规CSS无法实现的逻辑。

CSS3对于伪元素的定义

1. 伪元素在DOM中创建了一些抽象元素，这些对象不存在与常文档流中。
2. 伪元素由两个冒号::开头，然后是伪元素的名称。
3. 使用两个冒号::是为了和伪类（CSS2中并没有区别）做区分。考虑兼容性CSS2中已存在的伪元素仍可以使用单引号:语法。但是CSS3中新增的伪元素必须以使用::。
4. 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后面。

简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

伪类和伪元素的区别

1. 伪类本质上是为了弥补常规CSS的不足，以便获取更多信息。
2. 伪元素的本质是创建了一个可以设置内容和样式的虚拟容器。
3. 可以同时使用多个伪类，但只能使用一个伪元素。

CSS选择器优先级、权重计算

CSS选择器的优先级

选择器的优先级分为两种：1. 选择器在同一级别时。2. 选择器在不同级别时。

CSS选择器在不同级别时

1. 在属性后面使用!important，会覆盖任意位置定义的样式。作为style属性写在元素内的样式。
2. id选择器
3. class选择器
4. 标签选择器
5. 通配符选择器
6. 浏览器默认属性或继承

总结：!important > id选择器 > class选择器 > 标签选择器 > 通配符选择器 > 浏览器默认属性

CSS在同一级别时

同一级别的选择器，后声明的会覆盖之前声明的。

CSS权重计算

1. 内联样式，如style=''。权值为1000。
2. id选择器，如#content,权值为0100。
3. 类、伪类、属性选择器，如.content、:link、[type=text]等，权值为0010。
4. 通配符、子选择器、相邻选择器等，权值为0001。
5. 继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
6. !important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

CSS那些属性可以继承？

字体系列属性

font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

文本系列属性

• text-indent: 文本缩进
• text-align: 文本水平对齐
• text-transform: 控制文本大小写。属性值为：lowercase(仅小写字母)、uppercase（仅大写字母）、capitalize（文本中的每个单词以大写字母开头）
• line-height: 行高
• word-spacing: 增加或减少单词间的空白（即字间隔）。
• letter-spacing: 增加或减少字符间的空白（字符间距）。
• direction：规定文本的书写方向。ltr(默认，从左到右)、rtl(从右到左)
• color: 文本颜色

元素可见性：visibility

光标属性：cursor

列表布局属性：list-style

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height)

• 盒子模型有两种， IE 盒子模型、W3C 盒子模型
• IE盒子模型宽高 = 内边距﹢边界﹢内容区
• 标准盒子模型宽高 = 内容区宽高
• css设置方法

/* 标准盒模型 */
box-sizing: content-box;

/* IE盒模型 */
box-sizing: border-box;

/* 继承父元素 */
box-sizing: inherit;

position属性值及描述作用

属性值如下：
position: static | relative | absoulte | fixed | sticky | inherit

position: static

默认值。没有定位，遵循常规流（忽略 top, bottom, left, right 或者 z-index 声明）。

positoon: relative

相对定位，相对于其正常位置进行定位，遵循常规流。并且设置top，right，bottom，left这4个属性进行偏移时，不会影响常规流中的任何元素。

position: absolute

绝对定位，脱离常规流。此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。
盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠（触发BFC）。

position: fixed

固定定位，脱离常规流。与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

position: sticky（CSS3）

粘性定位，该定位基于用户滚动的位置。
在常态时,它的行为就像 position:relative，遵循常规流。
当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置， 脱离常规流。

position: inherit

从父元素继承 position 属性的值。

display属性值及描述作用

常用属性

display: none | block | inline-block | table | inline-table | flex | inline-flex | grid | inline-grid | inherit

表格属性

display: table-captoion | table-cell | table-row | table-row-group | table-column | table-column-group | table-header-group | table-footer-group

table-caption

此元素会作为一个表格标题显示（类似 <caption>）

table-header-group

此元素会作为一个或多个行的分组来显示（类似 <thead>）

table-footer-group

此元素会作为一个或多个行的分组来显示（类似 <tfoot>）

table-cell

此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

table-row

此元素会作为一个表格行显示（类似 <tr>）

table-row-group

此元素会作为一个或多个行的分组来显示（类似 <tbody>）

table-column

此元素会作为一个单元格列显示（类似 <col>）

table-column-group

此元素会作为一个或多个列的分组来显示（类似 <colgroup>）

其他属性

display: list-item | run-in

display: list-item

此元素会作为列表显示

display: run-in

此元素会根据上下文作为块级元素或内联元素显示

display: none;和visibility: hidden;的区别

两者都能让元素不可见。区别在于：

• display: none;,会让元素完全从渲染树中消失，渲染时不占据任何空间。visibility: hidden;，元素仍存在渲染树中，渲染时仍占据空间，只是内容不可见。
• display: none;是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过改变子孙节点的display属性无法改变显示状态。visibility: hidden;是继承属性，子孙节点消失是由于继承hidden属性，通过设置visible属性可以让子孙节点显示。
• 修改常规流中元素的display属性通常会引起文档重排。修改visibility属性只会造成元素的重绘。
• 读屏器不会读取display: none;元素内容，但是会读取visibibity: hidden;元素内容。

隐藏元素的几种方法

• visibility: hidden; 该属性隐藏元素，单元素在文档流中仍占据空间。
• display: none; 元素不可见，并且在文档流中不占据空间。
• opacity: 0; CSS3属性，设置0可以让元素透明。
• filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而让元素消失“”在页面上。
• position: absolute; 设置left值负值定位，使元素在可视范围内。
• transform: scale(0); 将元素设置无限缩小，元素不可见，元素所在位置被保留。
• height: 0; 将元素高度设置为0，并消除边框。
• <div hidden="hidden"></div> HTML5属性，效果与display: hidden;一样。但这个属性用于记录一个元素的状态。

对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？

什么是 FOUC？

FOUC：Flash of Unstyled Content，简称为FOUC，文档样式短暂失效(又称浏览器样式闪烁)。
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁。这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

可能原因：

• 使用import方法导入样式表
• 将样式表放在页面底部
• 有几个样式表，放在html结构的不同位置

原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法:

• 使用link标签将样式表放在文档head中

什么是外边距重叠？ 重叠的结果是什么？

什么是外边距重叠

外边距重叠： margin-collapse
垂直相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距。更详细介绍可移步至：CSS 框模型( Box module )

折叠后margin的计算

1. 参与折叠的margin都是正值

<div style="width:50px; height:50px; margin-bottom:50px; background-color: red;">A</div> <!-- 重点： margin-bottom:50px;  -->
<div style="width:50px; height:50px; margin-top:100px; background-color: green;">B</div> <!-- 重点： margin-top:100px;  -->

在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值
示意图:

2. 参与折叠的margin都是负值

<div style="width:50px; height:50px; margin-bottom:-75px; background-color: red;">A</div> <!-- 重点： margin-bottom:-75px;  -->
<div style="width:50px; height:50px; margin-top:-50px; background-color: green;">B</div> <!-- 重点： margin-top:-50px;  -->

在 margin 都是负值的时候,取的是其中绝对值较大的,然后从零开始,负向位移
示意图:

3. 参与折叠的margin中有正值有负值

<div style="width:50px; height:50px; margin-bottom:-50px; background-color: red;">A</div> <!-- 重点： margin-bottom:-50px;  -->
<div style="width:50px; height:50px; margin-top:100px; background-color: green;">B</div> <!-- 重点： margin-top:100px;  -->

在margin中有正值有负值的时候，要从所有负值中选出绝对值最大的，所有正值中选择绝对值最大的，二者相加。此例的结果即为: 100px + (-50)px =50px;
示意图:

4. 相邻的margin要一起参与计算

<div style="margin:50px 0; background-color:red; width:50px; height:50px;">
    <div style="margin:-60px 0;">
           <div style="margin:150px 0;">A</div>
    </div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px; height:50px;">
    <div style="margin:-120px 0;">
           <div style="margin:200px 0;">B</div>
    </div>
</div>

请注意，多个 margin 相邻折叠成一个 margin，所以计算的时候，应该取所有相关的值一起计算，而不能分开分步来算。
以上例子中，A 和 B 之间的 margin 折叠产生的 margin，是6个相邻 margin 折叠的结果。将其 margin 值分为两组：

正值：50px，150px，200px
负值：-60px，-100px，-120px
根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是 -120px，所以，最终折叠后的 margin 应该是 200 + (-120) = 80px。

5. 注意

另外,要注意,自身的margin-botom和margin-top相邻时也会发生重叠,只有当自身内容为空,垂直方向上border,padding,均为0时,自身的margin-top与margin-bottom才会相邻。
示例：

<div style="border:1px solid red; width:100px;">
    <div style="margin-top: 100px;margin-bottom: 50px;"></div>
</div>

以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。
示意图：

外边距重叠的意义

外边距的重叠只产生在普通流文档的垂直外边距之间，避免块级元素之间产生双倍边距的问题。

外边距重叠解决方案

1. 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠

浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会。

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>

示意图：

两个绿色的块儿之间，相距100px，而若 B 和它的浮动包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，显然，没有发生折叠。

2. 创建了块级格式化上下文1的元素，不和它的子元素发生 margin 折叠

以 “overflow : hidden” 的元素为例：

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>

若 B 和它的 "overflow:hidden" 包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，否则，没有发生。
示意图：

解释下什么是浮动和它的工作原理？

什么是浮动？

非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进行缩放。

link和@import的区别

从属关系区别

@import是CSS提供的语法规则，只有导入CSS的作用。link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

兼容性区别

@import是CSS2.1的语法，只有在IE5+才能识别；link标签作为HTML元素，不存在兼容性问题。

加载顺序区别

加载页面时，link标签引入的CSS能被并行加载；@import引入的CSS将在页面加载完毕后才加载。

DOM可控性区别

可以通过JS操作DOM，插入link标签来改变样式；而无法通过JS添加@import方式来引入样式。

权重区别

link引入的样式权重大于@import引入的样式。

px、em与rem的区别？

px

px，是相对长度单位，它是相对于显示器屏幕分辨率而言的。
优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

em

em，是相对长度单位，em是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
优缺点：em的值并不是固定的，它会继承父级元素的字体大小。

px和em的之间的相互转换：

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em=16px。那么，12px=0.75em，10px=0.625em。
为了使用方便，用em时，我们通常在CSS中的body选择器中声明font-size=62.5%（使em值变为：16px*62.5%=10px），之后，你只需要将你使用的px值除以10，即可得到em值，如：12px=1.2em，10px=1em。

rem

rem是CSS3新增的一个相对单位，rem是相对单位，是相对HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。

css reset 和 normalize.css 有什么区别？

两者都是通过重置样式，保持浏览器样式的一致性。区别在于：

1. normalize.css 保护了有价值的默认值

css reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，normailze.css保持了许多磨人的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。

2. normalize.css 修复了浏览器的bug

它修复了常见的桌面端与移动端浏览器的bug。这往往超出了reset所能做到的范围。关于这一点，normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3. normalize.css不存在大量的样式继承链

使用reset css最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，在normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们仅会有目的地对目标元素设置样式。

4. normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到的部分（比如表单的一般化）。

5. normalize.css 拥有详细的文档

normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。

css sprite是什么？有什么优缺点？

将多个小图标he拼接到一张图片里，通过background-position和元素尺寸调节需要显示的背景图案。

优点

• 减少HTTP请求，极大地提高页面加载速度
• 提高压缩比，减少图片体积大小，提高网页加载速度
• 替换方便，只需要在一张图片上修改颜色或样式即可实现

缺点

• 维护麻烦，不管是图标的合并，还是修改一个或多个图标时导致整个图片布局的重新布局。

CSS优化、提高性能的方法有哪些？

加载性能

• 建立公共样式类，减少代码体积
• 利用CSS继承，减少代码体积
• 合并属性，减少代码体积
• 慎用@import引入CSS，建议使用link, 因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载
• 巧用CSS sprite，减少图片体积的同时，减少HTTP请求
• CSS压缩

选择器性能

CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等

• 减少css嵌套，最好不要套三层以上
• 避免使用通配规则，以及慎用用css reset，可以选择normolize.css

渲染性能

• 慎用CSS express
• 慎用高性能属性：浮动、定位
• 尽量减少页面重排、重绘:
• 去除空规则
• 属性值为0时，不加单位(优化)
• 属性值为浮点数0.**时，可以省略小数点前的0(优化)
• 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后(优化)

可维护性

• 将css文件放在页面最上面
• 样式与内容分离：将css代码定义到独立css文件中

重绘和回流的描述及优化方案

这部分涉及内容较多，请移步至浏览器的回流和重绘及其优化方式