2020-09-17 html的列表编号倒序 + css的2个inlineblock之间的空隙 + JS的requestIdleCallback + 软技能的周日报的excel的模板

2020-09-17 题目来源：http://www.h-camel.com/index.html

[html] 举例说明只用html和css如何使得一个列表编号倒序？

方法一： reversed

<ol reversed>
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ol>

方法二： li 中的 value 值

<ol>
    <li value="3">3</li>
    <li value="2">2</li>
    <li value="1">1</li>
</ol>

方法三： css自定义的 counter 计算器

<style>
    ol {
      list-style: none;
    }

    ol li {
      counter-increment: my-custom-counter -1;
    }

    ol li::before {
      content: counter(my-custom-counter) ". "
    }
</style>

<ol style="counter-reset: my-custom-counter {
   
   { items.length + 1 }}">
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ol>

摘自 https://www.html.cn/web/html/20078.html

[css] 为什么代码中两个display属性为inline-block的元素之间有多余字符（包括换行、制表符等）会造成页面中这两个元素之间有空隙？解决方案是什么？替代方案又都有哪些？

display: inline-block; 的最大特点是相比于浮动、定位最大不同就是其没有父元素的匿名包裹性，所以使用自由，可内嵌block，置身于inline的水平元素中。

同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。

原因： 元素行内排版时，元素之间的空白符例如空格 回车 都会被浏览器处理，原来HTML代码中的回车换行转成了一个空白符，字体不为0时，会占据一定宽度，所以产生了空隙。 这个间距会随着字体大小变化，行内元素字体大小为16px时，间距为8px。

解决：

1.这两个inline-block的元素放置在同一行

2.设置子元素的margin负值

3.设置父级元素样式

.parent{
  display: table;
  word-spacing:-1em;
}

转自 https://blog.csdn.net/qq_32614411/article/details/82223624

[js] requestIdleCallback在EventLoop的什么阶段执行？如何执行？

浏览器每一帧要完成什么工作呢？

处理用户的交互 -> js解析执行 -> 帧开始，窗口尺寸变更，页面滚去等的处理 -> rAF -> layout布局 -> paint 绘制

如果上述过程完成后没有超过16ms，说明时间有富余，就会执行requestIdleCallback里注册的任务

总结自 https://www.cnblogs.com/Wayou/p/requestIdleCallback.html

[软技能] 要你设计一个日报（周报）的excel模板，你是如何？有什么原则？要查看哪些信息呢？

i am not a leader, i am just a poor programmer

任务及子任务规划，完成情况

重难点情况反馈

时间节点梳理

工作计划

建议