【每日十分钟前端】基础篇8，html5有哪些新特性、移除了那些元素、元素居中、for...of、for...in和forEach、map的区别

1、[HTML]html5有哪些新特性、移除了那些元素？
2、[CSS]如何让元素居中？水平居中的方法、垂直居中的方法、水平垂直居中的方法？
3、[JS]for…of、 for…in 和 forEach、map 的区别？

---

1、html5有哪些新特性、移除了那些元素？

新特性：

• 内容元素：article、footer、header、nav、section。
• 表单控件：calendar、date、time、email、url、search。
• 控件元素：webworker, websocket, Geolocation。
• 图像：canvas，svg

移除的元素：

• 纯表现的元素：basefont、big、center、font、s、strike、tt、u
• 对可用性产生负面影响的元素：frame、frameset、noframes

2、如何让元素居中？水平居中的方法、垂直居中的方法、水平垂直居中的方法？

水平居中：

(1)、行内元素

目标元素的父级如果是块级元素inline-block，则父级设置text-align:center;

如果不是，则父级设置为块级元素后display:block，再给父级设置text-align:center;

(2)、块级元素

给目标元素定宽度后设置margin:0 auto;

目标不定宽度，默认目标宽度和父元素一样，设置目标元素为display:inline-block;、display:inline转换为行内块元素/行内元素，给父级元素设置text-align:center;

使用定位属性:
设计父元素为相对定位，再设置子元素为绝对定位，设置子元素的left为50%;

定宽度：设置绝对元素的margin-left:-元素一半的px，或者设置transform: translateX(-50%);

不定宽度：利用css3新增属性transform: translateX(-50%);

使用flex布局:
给待目标元素的父元素添加display: flex; justify-content: center;

垂直居中：

(1)、行内元素：

单行：设置行高等于父级盒子高line-height: xxx;

多行：父级设置display: table-cell;vertical-align: middle;

(2)、块级元素：

使用定位：

若目标元素设置了高度，则先设置父元素为相对定位relative，再设置目标元素为绝对定位absolute，设置目标元素top: 50%;

若目标元素不设置高度，设置transform: translateY(-50%);

使用flexbox布局：
给目标元素的父元素设置display: flex;align-items: center;

水平垂直居中：

同时使用上述两种居中;

例如：
目标元素未设置宽高，设置父元素为相对定位，给子元素设置绝对定位，设置left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

目标元素设置宽高，设置父元素为相对定位，给目标元素设置绝对定位，设置top: 0; right: 0; bottom: 0; left: 0; margin: auto;或设置left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

父级设置flex定位display: flex;后，父级设置justify-content:center;align-items:center;

3、for…of、 for…in 和 forEach、map 的区别？

for…of

根据值value遍历，不能遍历对象；
用于遍历数据，比如数组中的值；
可以使用break、continue、return。

for…in

根据key遍历，可以遍历数组的键名/下标；
大部分用于对象。

forEach

根据index遍历，常用于遍历数组；
没有返回值；
可以用break中断循环，不可以用return返回到外层函数。

补充：
对于空数组不执行回调函数；
不能使用continue；
return功能类似for中的cantinue;

map

根据index遍历；
不改变元素组，对元素进行加工处理，会返回新数组；
可以使用break中断循环，可以使用return返回到外层函数。