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返回到外层函数。