给儿子推荐了个学习网站：https://chinese.freecodecamp.org/ 希望他能跟着学一下，同时自己也来跑一遍，一则看看有没有坑二则如果遇到他向我咨询也能较快的解答问题。当然更多的也是系统学习，温故知新。
u标签 标签内的文本自动加下划线
em标签 斜体加强
s标签 删除中划线
rgba() 背景色rgba 代表：r = red 红色 g = green 绿色 b = blue 蓝色 a = alpha 透明度
box-shadow 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
box-shadow 属性的阴影依次由下面这些值描述：
- offset-x 阴影的水平偏移量；
- offset-y 阴影的垂直偏移量；
- blur-radius 模糊半径；
- spread-radius 阴影扩展半径；
- color
其中 blur-radius 和 spread-radius 是可选的。
可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。
CSS 里的 opacity 属性用来设置元素的透明度。
属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。
text-transform 文字大小写样式设置
定位：absolute 绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。 如果它的父元素没有添加定位规则（默认是 position: relative;），浏览器会继续寻找直到默认的 body 标签。
CSS3 引入了 hsl() 做为颜色的描述方式。 3个参数 0-360的色相，饱和度，亮度 这种方式对我们这美学细胞差的人很好，平时相应的只要调饱和度亮度就好
例子：
| 颜色 | HSL |
|---|---|
| 红 | hsl(0, 100%, 50%) |
| 黄 | hsl(60, 100%, 50%) |
| 绿 | hsl(120, 100%, 50%) |
| 蓝绿 | hsl(180, 100%, 50%) |
| 蓝 | hsl(240, 100%, 50%) |
| 品红 | hsl(300, 100%, 50%) |
linear-gradient() 线性渐变
例子：第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序：
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
使用 CSS Transform scale 属性可以更改元素的大小
例子，div悬停缩放1.1倍了解伪元素 ::before 和 ::after。 伪元素可以在所选元素之前或之后添加一些内容div:hover{transform: scale(1.1);}
通过伪元素构建心形代码例子
<div class="heart"></div>
了解 CSS 的关键帧和动画是如何工作的
如果要给元素添加动画，你需要了解 animation 属性以及 @keyframes 规则。 animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。 总共有 8 个 animation 属性。 为了便于理解，本挑战中我们只会暂时涉及到两个最常用的属性。
animation-name 用来设置动画的名称，也就是我们稍后要在 @keyframes 里用到的名称。
animation-duration 设置动画所花费的时间。
tabindex 属性还可以指定元素的 tab 键焦点顺序
除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位，但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。
四个不同的视窗单位分别是：
- vw：如 10vw 的意思是视窗宽度的 10%。
- vh： 如 3vh 的意思是视窗高度的 3%。
- vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
- vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。
下面这个例子是设置 body 标签的宽度为视窗宽度的 30%
flex:
align-items 属性与 justify-content 类似。 回忆一下，justify-content 属性使 flex 子元素沿主轴排列。 行的主轴是水平线，列的主轴是垂直线。
Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。
CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。
flex-shrink 属性定义 flex 子元素的收缩规则
flex-grow和上面正相反，指的是扩大规则 ，例如两个div ，一个 flex-grow：1；一个flex-grow：3 上面同理
flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。
flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整
flex短方法属性：例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。
属性的默认设置是 flex: 0 1 auto;。
order 属性告诉 CSS flex 容器里子元素的顺序
flex 子项目的最后一个属性是 align-self。 这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素
css网格：
用于整体模版布局
grid-template-columns: repeat(3, 1fr); repeat函数 上面的例子就是3列，每列宽度
这种布局和hl里的grid布局一样的
repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。
如：
上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。 注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
