知识点整理

一、定位

定位( 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的学习。