table 里面的元素等分，是经常遇到的需求，一般都会想所有宽度设为相同的应该就等分了，但是然并卵，今天就遇到了这种坑，就算设了宽度一致，还是没有等分，场景是这样的，一个 tr 里面第一个 th 的宽度跟其他不一样，table 宽度为 100%，最后实现等分的方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

table {
  width: 100%;
  height: 100%;
  position: relative;
  display: table;
  table-layout: fixed;
  th,
  td {
    padding: 10px;
    border: solid 1px #d9d9d9;
    background-color: #f7f9fa;
    text-align: center;
    display: table-cell;
    width: 2%;
  }
}

最近在弄自己的 OA 系统，需要把 api 处理脚本部署到 linux 服务器上，在配置好环境，在服务器上成功运行代码后，发现一个问题，当我退出命令窗口时，程序就没在执行了，这没有达到永久可以连接 api 的目的，google 了一下之后，了解到要让程序永久运行，可以让程序在后台执行，主要的方法有 nohub、screen、开机启动等，其中 nohub 在关闭命令窗口之时，会关掉程序，去除，开机启动要修改系统配置，个人不太喜欢用这种方法，剩下 screen 了，它是可以让不同的程序在不同的命令窗口中执行，有屏幕分离的模式，会给每个屏幕创建不同的进程，只要不杀死进程，即使离开当前命令窗口，也不会停止程序的运行，所以使用 screen 是最好的方案了。

1. 关于数据更新机制

   （1）v-if 关闭组件的时候，会销毁数据，可以用于实现返回父组件关闭音频等媒体，如果只是界面的开关的话，用 v-show 即可

   （2）离开子组件后，父组件所传递的数据需要清空，切记不要在网络请求里做清空操作，因为网络请求是有延迟的，一般放在打开子组件的事件里执行清空操作

分页是一种比较常见的功能，分页的原理其实也很简单，首先要知道没有需要展示的项目数量 pageSize，然后还得知道当前所在的页数 currentPage, 设所有的 item 都在一个数组 array 里，每页需要展示 5 个 item，那么当 currentPage = 1 时，第一页要展示的所有 item 为 array.slice(0, 4), 第二页要展示的 item 为 array.slice(5, 9), 以此类推，那么第 n（n >= 0) 页需要展示的 item 应该为：array.slice(5n, 5n+4)，推而广之，基本数字的分页公式就出来了：

用 flex 布局一时爽，一直爽，但是里面还是有些坑需要避一避的。比如说想要有间隔的布局，但是用 space-around 和 space-between 都会有一个瑕疵，那就是，最后一行并不是左对齐的，有人会说用 aligh-content，交叉轴对其啊，但是 jusfy-content 需要 flex-start 才能做到这种效果，这样子的话，就没有居中效果了，因此，只能另辟蹊径。我采用的方法比较笨拙，就是在最后一个块级元素的后面，加多两个空的等宽的块级元素，高度设置为 0，完美实现想要的效果。

前几天有人问我给定一个这样的结构：div => div，如何让里面的元素水平垂直居中？给出 css2 代码。这对于一直用 css3 布局方式的我来说，一时还有点蒙蔽，只知道左右居中一般用 margin：0 auto，至于垂直居中，还真没用 css2 实现过。于是动手实践，发现以下的方式而已完美达到想要的效果。

系统环境

1

centOS7 64位

这是一个一键生成响应式表格的方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  line-height: 40px;
  table-layout: fixed;
  color: #333;
  font-weight: normal;
  font-size: 14px;
  margin: 5% 0;
  td{
    padding: 10px;
  }
  thead {
    background-color: #cce5ff;
    font-weight: 500;
  }
}

table-bordered {
  border: 1px solid #e0e0e0;
}

.table-bordered {
  th {
    background: #e4efff;
    border: 1px solid #e0e0e0;
    font-weight: normal;
    height: auto;
  }
  td {
    background: #e4efff;
    border: 1px solid #e0e0e0;
    font-weight: normal;
    height: auto;
  }
  thead {
    th {
      border-bottom: 1px;
      font-weight: 500;
      height: auto;
    }
    td {
      border-bottom: 1px;
      font-weight: 500;
      height: auto;
    }
  }
}

1. 全屏是什么：

   个人理解，全屏指的是去掉浏览器的导航栏，浏览器的全部空间被页面所占有，网页即 html 文档，网页全屏即 dom 全屏

2. 不同的浏览器又不同的全屏事件可以调用，但是不同浏览器的全屏事件并不一致，因为还没被写入规范中，所以需要判断在特定的浏览器下，哪个事件可以用，以下是全屏事件的封装：

1. key 值在 vue 组件中的作用：

   高效利用 dom

2. 分析：