几个有利的CSS小专业知识(小结)

序言

今日偷个懒，不长篇大论，共享几个你将会不知道道的 CSS 小专业知识。

款式的次序

CSS 编码：

.red 
{
    color: red;
}

.blue 
{
    color: blue;
}

HTML 编码：

<div class="red blue">
这是甚么色调
</div>
<div class="blue red">
这是甚么色调
</div>

记得以前这是1道较为火的 CSS 考题，那时候仿佛是有很多的人答错（30% 以上）

回答你们应当是了解的。

能够这样提高 CSS 特性

子孙后代挑选器

款式挑选器正中间的空格是甚么？它的姓名是 —— 子孙后代挑选器。

div p {
    color:#3388ff;
    font-size:14px;
}

子孙后代挑选器也许会很耗特性

耗能与否取决于新项目的体积，但不提议应用沒有实际意义的子孙后代挑选器。比如：

.div p {
    // ...
}

为何会更耗费特性呢?

由于访问器最先会寻找全部 p 标识，随后再向上搜索包括 class 为 div 的元素。这样1来假如 编码中有许多 p 标识，无疑是会做许多反复工作中的。

因此能够降低应用 HTML 标识来界定 CSS 的方法，换为应用实际的 class。

访问器会从右到左分析 CSS 挑选器

.content_box div p a { 
    // ...
}

访问器会对上面的事例做以下的流程解决：

1. 最先寻找网页页面全部的 <a> 元素
2. 随后向上寻找被 <p> 元素包裹的 <a> 元素
3. 再向上搜索到1直至 .content_box 的元素

从上面的流程大家能够看出，越靠右的挑选器越具备唯1性，访问器分析 CSS 特性的高效率就越高。

因此1定换为应用实际的 class 撰写 CSS 编码。

防止 reflow 风险性

大家了解改动一些 CSS 特性会致使全部网页页面合理布局的重绘( repaint )/重排( reflow )。

repaint 的速率远快于 reflow，因此防止 reflow 更关键

致使 repaint 和 reflow 的缘故

1. DOM 元素的加上、改动、删掉（repaint、reflow）
2. 仅仅改动 DOM 元素的字体样式色调（repaint，不必须调剂合理布局）
3. 运用新的款式或改动任何危害元素外型的特性（repaint、reflow）
4. resize，网页页面翻转（repaint、reflow）
5. 载入元素的一些特性（repaint、reflow）（offsetTop/Left/Width/Height、getComputedStyle、scrollTop/Left/Width/Height、clientTop/Left/Width/Height等）

假如在很多的元素上变更这些特性，那末测算和升级她们的部位/尺寸必须花销很长的時间。

更为耗费特性的 CSS 特性

有1些 CSS 特性会比别的特性耗费能多的特性，即访问器分析这些特性必须花销更多的時间。

如：border-radius、 box-shadow、 filter、 :nth-child等

自然这些特性大家常常应用，一些没法防止。要做出适度的选择。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。