CSS中的postion和cursor特性

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

postion

background-postion我们常用于元素的定位，而且可以接收好几个值：

1、接收一个值

这个值可以为百分比、数值或者关键字，另一个值一定是center

// 单个属性值
background-postion: 33px;
background-postion: center;
background-postion: left;
background-postion: bottom;
background-postion: right;
background-postion: top;
background-postion: 30%;
background-postion: right;
background-postion: right;
//依次等价于
background-postion: 33px center;
background-postion: center center;
background-postion: left center;
background-postion: bottom center;
background-postion: right center;
background-postion: top center;
background-postion: 30% center;
background-postion: right center;
background-postion: right center;

2、接收两个值

两个值都是数值或者百分比值时，第一个值表示水平方向，另一个值表示垂直方向，如果我们把两个值都是为background-position: 0% 0%，那么就等于这个写法background-position：left top;

当两个值都是关键字时，top和bottom表示垂直方向，left和right表示水平方向，所以我们写成background-position: top right和background-position: right top效果是一样的，但是我们不能写成background-position: right left和background-position: top bottom,如果这样写，是无效的。

当两个字一个是数值或百分比值另一个是关键字时，如果数值或百分比值是第一个值，则表示水平方向，第二个值表示垂直方向。如果数值或百分比值是第二个值，就表示垂直方向，那另一个值就表示水平方向，所以如果我们写成background-position: 44px left是无效的。

3、接收3个值或4个值

数值和百分比值表示的是偏移量，第一个值一定是关键字，用来表示从哪个方向开始偏移的，如果是3个值，则缺少的偏移量为0,所以我们写成background-position: 44px left top是无效的。

background-postion接收多个值在浏览器中已经兼容，我们可以用background-position来代替calc()函数，从而去实现左方向或右方向的定位。

cursor

cursor中我们很少用到抓取和缩放效果，cursor:zoom-out用于放大，cursor:zoom-in用于缩小，如果想要在桌面上查看放大或者缩小，加入对应的属性就行。

cursor: grabbing在电脑页面显示的是一个握住的手形，cursor: grab在电脑页面显示的是一个张开的手形，在项目中使用我们可以加入前缀，防止不显示的问题。

如果我们想要在IE中去使用，我们可以加入move属性值。

// 用move属性值来代替grab
.wrapper {
  cursor: move;
  cursor: grab;
}