发表于: 2018-07-26 20:32:07

2 584


完成任务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

 


返回列表 返回列表
评论

    分享到