每天三道前端题（5）

一、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;

}