hash模式
以#为分隔符, 通过hashchange事件来实现

history模式
通过popstate事件以及history的pushState, replaceState方法来实现

两种模式的实现详见前端路由两种模式的实现

一. 数值概论

1. 避免使用神秘数值
   程序主题中仅能出现的文字量就是0和1, 任何其他文字量都应该换成更有描述性的表示
   比如一个输入框只能输入1到100的数字, 进行判断时:

   1	if(1<=input<=100)

1. 为布尔变量的命名:
   a. 给布尔变量赋予隐含”真/假”含义的名字
   b. 不要在变量的前面加上Is, 这样优点在于这样的词不能用于那些模糊的状态 , 但是这样的词要低于纯粹的状态词 , 形如 if(isGet) 与 if(ok)
   c. 使用肯定的变量名
2. 为temp类型的命名 , 这样的变量通常只是因为没有完全的明白它的意义

写了如下代码:(伪)

1
2

<button class="moveBtn">click</button>
<div class="container"></div>

Shadow DOM 为Web组件中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。

可以在settings -> preferences -> show user agent shadow DOM处进行勾选

从而在element内显示Shadow DOM, 比如input内的div:

css函数matrix()用六个指定的值来指定一个均匀的2d变换矩阵，这个矩阵中的常量值是不作为参数进行传递的，其他的参数则在主要列的顺序中描述

matrix(a, b, c, d, tx, ty)是matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)的简写

圆角

我们知道将正方形的border-radius设置为宽的一半可以得到一个圆, 但当border-radius设置为大于一半时, 仍然可以得到一个圆, 这是浏览器规范决定的, 它会按比例减小各个边框半径所使用的的值, 直到它们不会相互重叠位置, 不过为border-radius指定一个固定值时当tag大小改变时就不会是一个圆了, 所以将border-radius设置为50%会更好

有些时候我们需要多重边框的效果, 这时用box-shadow就可以很容易地做到这一点, 因为他支持逗号的写法, 从而为一个元素添加多个box-shadow, 形成多重边框的效果

html代码如下:

1

<div class="example"></div>

我们在寻常开发中, 通常会更注重js, 但是我相信css还是有很多有用的点是值得我们学习的, 读《css揭秘》这本书有些点给了我很大的触发, 所以把认为对自己有用的点记录下来

1. 使用百分比来替代固定长度, 或者使用一些与视口相关的单位, 比如vw, vh, vmin, vmax, 它们的值解析为视口宽度或高度的百分比