完成任务4之后，发现自己对各种定位依然不是很熟悉，于是复习了一下过往的知识点，发现基础还不是很牢实。

明天会学习下flex布局，继续加深各种布局定位的理解，感觉学好布局非常的重要，任务可以先放着，毕竟基础打好后任务做起来也能更加得心应手。

任务4整体上都使用了子绝父相的布局特性，保证内容在相对定位内是个可控的范围，不会出现莫名其妙的位置偏移。

但是完成后感觉CSS写得有点多，并且代码冗余得很厉害，不知是否有java那样的类继承然后只修改单独代码就可以的方法。

以下是我在任务4过程中查阅复习的一些资料。

伪类：

静态伪类：只能用于超链接的样式。

:link “链接”：超链接点击之前

:visited “访问过的”：链接被访问过之后

动态伪类：针对所有标签都适用的样式。

:hover “悬停”：鼠标放到标签上的时候

:active “激活”： 鼠标点击标签，但是不松手时。

:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接a标签：

a标签有4种伪类（即对应四种状态），需要背诵。如下：

:link “链接”：超链接点击之前

:visited “访问过的”：链接被访问过之后

:hover “悬停”：鼠标放到标签上的时候

:active “激活”： 鼠标点击标签，但是不松手时。

在写a:link、a:visited这两个伪类的时候，要么同时写，要么同时不写。如果只写a属性和a:link属性，不规范。

在CSS中，这四种状态必须按照固定的顺序写，否则会失效。

记忆：love hate ,先爱后恨。

CSS中一共有三种手段，使一个元素脱离标准文档流：

1、  浮动

2、  绝对定位

3、  固定定位

行内元素和块级元素的区别：（非常重要）

行内元素：

其他行内元素并排；

不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

霸占一行，不能与其他任何元素并列；

能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

块级元素转行内元素

display:inline

行内元素装块级元素

display:block