周报5

水平垂直居中

方法一：

父元素设置相对定位，子元素设置绝对定位，margin: auto; top: 0; right: 0; bottom: 0; left: 0;

方法二：

父元素设置相对定位，子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: 元素高度的一半px;

方法三：

父元素设置相对定位，子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

方法四：

父元素设置flex定位（display：flex;），justify-content: center; align-items: center;

方法五：

父元素设置flex布局或grid布局，子元素设置margin:auto;即可

position取值及其作用

1. static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。

2.relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。

3. absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。

4. fixed：绝对定位，相对于浏览器窗口进行定位，同样是使用top、bottom、right、left.

五个常用DOM方法

1.getElementById: 返回一个与给定id属性值的元素节点对应的对象。是document对象特有的函数。getElementById的方法只有一个参数：要获得的元素的id属性的值，id值必须放在单引号或双引号。

typeof操作符可以告诉我们他的操作数是一个字符串，数值，函数，布尔值或对象。

2.getElementsByTagName:获取没有id属性的对象。

即使在整个文档里这个标签只有一个元素，getElementsByTagName返也回一个数组。

即使在整个文档里这个标签只有一个参数，参数是标签的名字。getElementsByTagName()允许将一个通配符("*")作为它的参数，文档里每个元素都将在这个函数所返回的数组里.

查看某文档有多少个元素节点：alret(document.getElementsByIdName("*").length);

3.getElementsByClassName: 通过class属性中的类名来访问元素。返回一个数组，包含某个类名的所有元素。只有一个参数：参数是类名。

4.getAttribute:只有一个参数：要查询的属性的名字。不属于document对象。只能通过元素节点对象调用。

5. setAttribute:只能用于元素节点。object.setAttribute(attribute,value);

*

文档中每个元素节点都是一个对象。

getElementById:返回一个对象，对应文档里一个特定的元素节点。

getElementsByTagName和getElementsByClassName：返回一个对象数组，对应文档里一组特定的元素节点。