李天龙_20210114李天龙

一、知识总结

1.css定位

定位( position )允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个
元素的上面,或者始终保持在浏览器视窗内的同一位置。
有许多不同类型的定位,您可以对HTML元素生效。

1.1 静态定位

静态( staitc )定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位
置 ——这没有什么特别的。
如果所有的父元素都没有显式地定义 position 属性,那么所有的父元素默认情况下 position 属性都
是 static 。

1.2 相对定位

相对定位与静态定位非常相似,占据在正常的文档流中,除了你仍然可以修改它的最终位置,包括让它
与页面上的其他元素重叠。
给元素加上 position:relative; 并不会改变元素的位置,需要使用 top , bottom , left 和 right
属性。
相对定位生成相对定位的元素,相对于其正常位置进行定位

1.3 绝对定位

position:absolute; 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。绝对定
位的元素不再存在于正常文档布局流中。
3.3.4 固定定位
fixed 固定定位,这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于
元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

2. z-index

当我们使用定位后,元素有可能会出现重叠现象。什么决定哪些元素出现在其他元素的顶部?当我们在
定位上下文中只有一个定位的元素,它出现在顶部,因为定位的元素胜过未定位的元素。如果是多个定
位元素,在后面的定位元素将出现在先定位与元素的顶部。
当然,我们可以使用 z-index 属性。 “z-index”是对z轴的参考。
网页也有一个z轴:一条从屏幕表面到你的脸(或者在屏幕前面你喜欢的任何其他东西)的虚线。 zindex 值影响定位元素位于该轴上的位置;正值将它们移动到堆栈上方,负值将它们向下移动到堆栈
中。默认情况下,定位的元素都具有z-index为auto,实际上为0。

3. position: sticky

还有一个可用的位置值称为 position: sticky,比起其他位置值要新一些。它基本上是相对位置和固定位
置的混合体,它允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点(例如,从视口顶
部起10像素)为止,此后它就变得固定了。

4.JavaScript

sd1UxO.jpg

文档对象模型针对的是一份文档,加上各个浏览器渲染Web页面的具体方法略有不同,那么相同的一份代码在不同的浏览器中便会有冲突不断。为了让DOM更具标准化,DOM也被纳入W3C标准。在W3C的标准中,DOM是独立于平台和语言的一种接口,它允许程序和脚本动态的访问更新文档的结构、样式和内容。

5.querySelector和querySelectorAll()

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代

6.querySelector系列和getElementById

6.1.区别

1、两者的W3C标准不同
querySelector系列属于W3C中的Selectors API(JS)规范
getElementsBy系列则属于 W3C的DOM 规范。
2、两者浏览器的兼容不同
getElementsBy系列基本能被所有浏览器支持。
querySelector系列则通常只有在考虑兼容性的时候才被提起(尽管两者功能近似)

3、接受参数不同
querySelector系列接收的参数是一个css选择器名。
getElementsBy系列接收的参数只能是单一的className、tagName 和 name。

4、返回值不同
querySelector系列返回的是静态节点列表
getElementsBy系列返回的是动态节点列表

7.Date函数的使用

在JavaScript中,Date对象用于处理日期和时间。常见创建Date对象的方式有两种:

7.1 创建不带参数的Date对象

var d=new Date();

7.2 创建一个指定日期的Date对象

var d=new Date(2021,1);

8.innerText和innerHTML

innerText主要是设置文本的,甚至标签内容,是没有标签的效果的。

innerHTML主要的作用是在标签中设置新的heml标签内容,是有标签效果的.

二、心得体会

​ 在今天的学习中,学习了JavaScript的一些知识,包括函数的使用,我发现我不能很好的去运用,之前在学校的课程中,老师也没有系统全面的去讲过,也只是过了一遍,我发现我对JavaScript还有很大的问题,我还需要更认真的去学。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1