一、mouseover和mouseenter有什么区别?
当鼠标移动到元素上时会触发mouseenter事件,类似mouseover,他们两者之间的差别是mouseenter不会冒泡。
由于mouseenter不支持事件冒泡,导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件,但是不会触发mouseenter和mouseleave事件。
二、CSS有哪几种定位方式?
1、Static
这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。
2、Relative
相对定位,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(在父元素由多个相对定位的子元素时可以看出),且会占用该元素在文档中初始的页面空间,即在使用top,bottom,left,right进行移动位置之后依旧不会改变其所占空间的位置。可以使用z-index进行在z轴方向上的移动。
3、Absolute
绝对定位,脱离文档流,不会占用页面空间。以最近的已经被定位的父级元素作为参考进行定位,如果其所有父元素都是static定位,那么此元素最终这是以当前窗口作为参考进行定位。
可以使用top,bottom,left,right进行位置移动,亦可使用z-index在z轴上面进行移动。当元素为此定位时,如果该元素为内联元素,则会变成块级元素,则可以直接设置其宽和高的值;如果该元素为块级元素,则其跨度会由初始的100%变成auto。
注意:当元素设置决对定位时,在没有设定top,bottom,left,right的值时,他们的值并不是0,这几个值是有默认值的,默认值就是该元素设置为决对定位前所处的正常文档流中的位置。
4、Fixed
固定定位,直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。
当父元素使用 transform时,会以父元素定位。
5、Sticky
粘性定位,可以理解为relative和fixed的混合。
当粘性约束矩阵在可视范围内为relative,反之则为fixed。粘性定位元素 如果和它的父元素一样高,则垂直滚动的时候,粘性定位效果是不会出现的,它的定位效果完全受限于父级元素。
如果父元素的overflow设置了 scroll,auto,overlay值;那么,粘性定位将会失效。同一个容器中 多个粘性定位元素独立偏移,因此可能重叠。 位置上下靠在一起的不同容器中的粘性定位元素,则会占用其他元素的位置,挤开其他元素,形成依次占位的效果。
三、如何使用CSS来实现禁止移动端页面的左右划动手势?
CSS属性 touch-action 用于设置触摸屏用户如何操作元素的区域(例如,浏览器内置的缩放功能)。
最简单的方法是:
html{
touch-action: none;
touch-action: pan-y;
}
还可以直接指定对应元素的宽度和overflow:
html{
width: 100vw;
overflow-x: hidden;
}