平安喜乐

你是否了解 CSS 的属性计算过程呢？上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。但是要说 CSS 属性的计算过程，还真的不是很清楚。没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。

没错，因为我们对 div1 进行了定位，因此它会应用非根元素包含块计算规则的第三条规则，寻找离它最近的 position 的值不是 static 的祖先元素，不过显然 body 的定位方式为 static，因此 div1 的包含块最终就变成了初始包含块。首先 HTML 作为根元素，对应的包含块就是前面我们所说的初始包含块，而对于 body 而言，这是一个 static 定位的元素，因此该元素的包含块参照第一条为 html，以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。

reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。

HTML5 是新一代的 HTML 标准，于2014年10月由万维网联盟（W3C）完成标准制定。HTML5 在狭义上是指新一代的 HTML 标准，在广义上是指整个前端。

相信做过前端开发的小伙伴们对渐变色在 UI 设计中的流行度一定不陌生，网页上也时常可以看到各类复杂的渐变色生成工具。使用原生的 CSS 变量加一些 JS 函数就能做出一个简单的渐变色背景生成器。请大家根据 index.js 文件中的提示和要求添加所需的 JavaScript 代码，让色块的输入值对应到渐变色背景中，并且在更改色块颜色之后，渐变色背景也会随之改变。现在渐变色生成器只完成了颜色选取的功能，需要大家帮忙把取色器中的两个色值通过 JS 函数更新给 CSS 变量，从而实现渐变色预览功能。

介绍目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案，本题可以使用 Flex 属性快速完成布局。准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：其中：css/style.css 是需要补充的样式文件。index.html 是主页面。images 是图片文件夹。在浏览器中预览 index.html 页面效果如下：目标建议使用 flex 相关属性完成 css/style.css 中的 TODO 部分。css答案

一开始的思路：由于appendChild会将已有的元素push到最后一个，那么只需要不断获取firstElementChild不断的push进去即可。但是发现错误点： 如果是 123 按照这种思路 逆序之后会变成312。后来思考了下：要实现逆序 那么就将后面的元素不断添加到前面即可。

前端全屏三个方案

浏览器事件循环原理与讲解

javaScript写的贪吃蛇，有注解和图片。

html标签介绍