权文哲_20200114-权文哲

知识点整理

一、定位

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

1、静态定位

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

2、相对定位

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

3、绝对定位

position:absolute; 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。绝对定位的元素不再存在于正常文档布局流中。
注意:绝对定位时是相对与除static之外的第一个定位过的祖先元素

4、固定定位

fixed 固定定位,这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于html元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

5、position: sticky

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

6、z-index

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

二、样式优先级

同一个元素有多个相同css属性来适配,这个时候就会发生样式冲突。

1、四种样式用法的优先级

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

2、不同选择器之间的优先级

id 选择器> class 选择器>元素选择器
### 3、重复定义样式时
相同的选择器都定义了对于某个元素的样式属性时,那么谁在后边元素适配谁。

4、改变优先级

如果想要改变样式的优先级,可以在css属性值后边加上 !important 来将优先级提高。

5、总结:

样式的优先级:就近原则,哪个样式离标签最近,标签就适应它的样式
选择器的优先级:在设置相同属性时:Id选择器>Class选择器>标签选择器
提升样式的优先级: 用!important提升优先级

6、补充

层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
计算规则:看选择器
总体规则:选择器选择范围越窄,约特殊
具体规则:通过选择器计算出一个4位数(****)
1、千位:如果是内联样式记1否则记0
2、百位:将选择器中所有id选择器的数量
3、十位:等于选择器中类选择器、伪类选择器、属性选择器的数量
4、个位:等于选择器中元素选择器、伪类元素选择器的数量

二 、js部分

1、dom操作

1.DOM — > Document Object Model(文档对象模型)
2.DOM 定义了表示和修改文档所需的方法(对象、这些对象的行为和属性以及这些
对象之间的关系。)DOM 对象即为宿主对象,由浏览器厂商定义,用来操作 html
和 xml 功能的一类对象的集合。
也有人称 DOM 是对 HTML 以及 XML 的标准编程接口。
DOM 基本操作(大部分都是类数组)——方法类操作

1.1 选择html元素

(1)document.getElementById() //元素 id 在 Ie8 以下的浏览器,不区分 id 大小写,而且
也返回匹配 name 属性的元素,通过 id 标识来选择这个元素,一一对应
(2)getElementsByTagName() //标签名,这是一个类数组,最主流的用法,经常用例把页面里面所有的 div 都选择出来()
(3)getElementsByName(); //IE 不支持需注意,只有部分标签 name 可生效(表单,表单元素,img,iframe),不是在所有的浏览器都能用——开发一般不用
(4).getElementsByClassName() // 类名 ->缺点: ie8 和 ie8 以下的 ie 版本中没有,可
以多个 class 一起,不是所有浏览器都能用
(5)querySelector() // css 选择器,只能选一个,在 ie7 和 ie7 以下的版本中没有
.querySelectorAll() // css 选择器,全选,选一组,在 ie7 和 ie7 以下的版本中没有
.querySelectorAll()和.querySelector()选出来的元素不是实时的(是静态的),所以一般
不用,其他的再怎么修改,跟原来的没有关系
id 选择器不能太依赖,一般当顶级框架存在,在 css 中一般用 class 选择器
query 是一个词条

2、定时器

2.1日期对象

Date()——就是一种对象,是系统提供好的
var date = new Date()大写的 Date 是系统提供的一个构造函数,通过 new Date 的方法会给我们返回一个对象,这个对象就是一个日期对象。日期对象有很多属性和方法。小的 date 代表此时此刻的时间。用小的 date 调用方法,如 date.getDate( )
Date 对象属性(不够标准)

2.2 js定时器

setInterval(); //注意:setInterval(“func()”,1000);定时循环器
例 :setInerval(function () {},1000);定时器,意思是 1000 毫秒执行一次这个函数
注意:setInterval();是 window 的方法,在全局上就算不写 window. setInterval();他
也会上全局的 GO 里面查找,所以不写 window.也行。
每一个 setInterval();都会返回一个一个数字,作为唯一的标识,有唯一标识就可以把他清除掉(利用 clearInerval 清除)

心得体会

今天早上学习了定位以及css样式的优先级,特别是定位老师讲的十分详细,解决了我以前网页布局排版中的疑问,下午学习js的dom操作获取heml标签,前面我只对document.getElementById()用的较多,今天学习了更多的方法,晚上我对这些方法进行深究,总结出了浏览器对他们的兼容性问题,这在以后开发中可能会起到很大的帮助。通过今天对js的学习我发现我前面对js的学习是很片面的,后面还应加强对js的学习。

标签

评论

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