知识整理之CSS篇

ゞ浴缸里的玫瑰 2022-03-08 14:54 303阅读 0赞

> CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至： [知识整理之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 ###

## 常见浏览器兼容性问题与解决方案？ ##

### 不同浏览器的标签默认的`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选择器  
![基础选择器][787564103-5c6ac113a0b47_articlex]

### 组合选择器 ###

组合选择器包含：多元素选择器、后代选择器、子元素选择器、毗邻选择器、相邻选择器  
![组合选择器][3135369761-5c6ac530275f8_articlex]

### 属性选择器 ###

![属性选择器][3158539893-5c6ac9634b897_articlex]

### 伪类选择器 ###

#### CSS1-2伪类选择器 ####

![CSS1-2伪类选择器][CSS1-2]

#### CSS3常用伪类选择器 ####

![CSS3常用伪类选择器][CSS3]

### 伪元素 ###

![css伪元素][css]

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

### 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 ###

默认值。没有定位，**遵循常规流**（忽略 `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属性值及描述作用 ##

### 常用属性 ###

### 表格属性 ###

#### 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详解][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 )][CSS _ Box module]

### 折叠后margin的计算 ###

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

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

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

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

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

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

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

请注意，多个 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`才会相邻。  
示例：

以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。  
示意图：  
![自身的codemargin-botom/code和codemargin-top/code相邻时也会发生重叠][codemargin-botom_code_codemargin-top_code]

### 外边距重叠的意义 ###

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

### 外边距重叠解决方案 ###

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

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

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

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

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

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

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

### 什么是浮动？ ###

非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

### 工作原理 ###

*  浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
 *  浮动元素碰到包含它的边框或者其他浮动元素的边框停留

### 如何清除浮动 ###

#### 1. 给浮动元素的父元素添加高度（扩展性不好） ####

如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。

#### 2. clear:both ####

在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。**这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。**

#### 3. 伪元素清除浮动 ####

上面那种办法固然可以清除浮动，但是我们不想在页面中添加这些没有意义的冗余元素，此时如何清除浮动吗？  
**结合 :after 伪元素和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。**

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

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

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

[HTML]: https://segmentfault.com/a/1190000017996964
[787564103-5c6ac113a0b47_articlex]: /images/20220308/083664a0ca564feb9c2dcbebe6669e19.png
[3135369761-5c6ac530275f8_articlex]: /images/20220308/e9ed75d315094bc98229c33e8ebfd250.png
[3158539893-5c6ac9634b897_articlex]: /images/20220308/8983147856f349e093c13a35c07e2ee4.png
[CSS1-2]: /images/20220308/c8f6b49b62b6451b9bfdebcaf6104d77.png
[CSS3]: /images/20220308/fdb87444df074f1eb30a60ef8017e37d.png
[css]: /images/20220308/dd48040f86b144098eb788d3b4c3a06d.png
[CSS_BFC]: https://www.cnblogs.com/chen-cong/p/7862832.html
[CSS _ Box module]: http://w3help.org/zh-cn/kb/006/
[margin]: /images/20220308/4317cf20130b4ab5acc687a297e0c7e3.png
[margin 1]: /images/20220308/9b49efc0ab21486c8950d7761095df15.png
[margin 2]: /images/20220308/dedd61b9e9234c7092a69af1116855ec.png
[codemargin-botom_code_codemargin-top_code]: /images/20220308/8bfb075a4f4949a8b2981fba6a052429.png
[margin 3]: /images/20220308/b5664d12753a45bd90c8fc7d43995f6f.png
[overflow _ hidden]: /images/20220308/55f25f736c4747a2afab2d6f254bfdd7.png
[Github Wiki]: https://github.com/necolas/normalize.css
[Link 1]: https://segmentfault.com/a/1190000011297958