知识体系整理之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; /* 仅IE六、IE7 浏览器识别 */
+color: red; /* 仅IE六、IE7 浏览器识别 */
*+color: red; /* 仅IE六、IE7 浏览器识别 */
#color: red; /* 仅IE六、IE7 浏览器识别 */
color: red\0; /* 仅IE8-IE10 浏览器识别 */ 
color: red\9\0; /* 仅IE九、IE10 浏览器识别 */ 
color: red!important; /* 仅IE6 浏览器不支持 */ 
复制代码

CSS选择符Hack

*html #demo { color: red; } /* 仅IE6 浏览器识别 */
*+html #demo { color: red; } /* 仅IE六、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的标签样式中设置
````css
#demo { display: inline } 
复制代码

当标签的高度设置小于10px，在IE六、IE7中会超出本身设置的高度

问题症状：IE六、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伪类的功能有两种：
4. 获取不存在与DOM树中的信息。好比a连接的:link、:actived等，这些信息不存在DOM树结构中，只能经过css选择器来获取。
5. 获取不能被常规CSS选择器获取的信息。好比经过:nth-child(odd)实现选择偶数行设置背景色，若是不是用伪类，而是用JavaScript来设置就复杂得多。经过伪类实现了常规CSS没法实现的逻辑。

CSS3对于伪元素的定义

6. 伪元素在DOM中建立了一些抽象元素，这些对象不存在与常文档流中。
7. 伪元素由两个冒号::开头，而后是伪元素的名称。
8. 使用两个冒号::是为了和伪类（CSS2中并无区别）作区分。考虑兼容性CSS2中已存在的伪元素仍可使用单引号:语法。可是CSS3中新增的伪元素必须以使用::。
9. 一个选择器只能使用一个伪元素，而且伪元素必须处于选择器语句的最后面。 简单来讲，伪元素建立了一个虚拟容器，这个容器不包含任何DOM元素，可是能够包含内容。另外，开发者还能够为伪元素定制样式。

伪类和伪元素的区别

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

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

CSS选择器的优先级

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

CSS选择器在不一样级别时

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

CSS在同一级别时

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

CSS权重计算

7. 内联样式，如style=''。权值为1000。
8. id选择器，如#content,权值为0100。
9. 类、伪类、属性选择器，如.content、:link、[type=text]等，权值为0010。
10. 通配符、子选择器、相邻选择器等，权值为0001。
11. 继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
12. !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

此元素会做为一个表格标题显示（相似 ）

table-header-group

此元素会做为一个或多个行的分组来显示（相似 ）

table-footer-group

此元素会做为一个或多个行的分组来显示（相似 ）

table-cell

此元素会做为一个表格单元格显示（相似 和 ）

table-row

此元素会做为一个表格行显示（相似 ）

table-row-group

此元素会做为一个或多个行的分组来显示（相似 ）

table-column

此元素会做为一个单元格列显示（相似 ）

table-column-group

此元素会做为一个或多个列的分组来显示（相似 ）

其余属性

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文件中

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

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