本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一.Character_Carousel
1.letter-spacing属性
letter-spacing 属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
语法：letter-spacing : normal | length | inherit ;
属性值：
● normal：默认。规定字符间没有额外的空间。
● length：定义字符间的固定空间(允许使用负值)。
● inherit：规定应该从父元素继承 letter-spacing 属性的值。
说明：该属性允许使用负值，这会让字母之间挤得更紧。
注释：所有浏览器都支持 letter-spacing 属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
示例：
h1 {letter-spacing: -10px}
h3 {letter-spacing: normal}
h4 {letter-spacing: 20px}
2.overflow属性
overflow 属性规定当内容溢出元素框时发生的事情。
说明：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
3.box-sizing属性
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
语法：
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
4.:root选择器
:root 选择器匹配文档根元素。
在 HTML 中，根元素始终是 html 元素。
二.typewriting
1.css中的vh
css中的vh是一种视窗单位，也是相对单位。
相对于视窗的高度。视窗被均分为100单位的vh。一般要想使背景填充整个页面都设置其为100vh。
vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。
示例：
h1{font-size:8vh;}
如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
三.Character_Charging
1.css的新函式clamp()
四.Dynamic_Effects
1.利用JS给一句话中每个字母都加上标签
代码
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./Dynamic_Effects.css">
<title>Dynamic_Effects</title>
</head>
<body>
<h1>CodingStartup</h1>
</body>
<script src="./Dynamic_Effects.js"></script>
</html>
JS部分：
// 如果要为每个字母都套上标签，可以在html中手动加入，也可以在JS中直接加入
const h1 = document.querySelector('h1')
// 这个是利用了正则表达式，\S代表搜寻每一个非空白的字元
// 透过.replace替换成加上了<span>标签的内容
// $&代表正则中匹配到出来的模式（Pattern）
h1.innerHTML = h1.textContent.replace(/\S/g, "<span>$&</span>")
这样就实现了利用JS给每个文字添加标签
