【前端学习笔记】CSS3 扩大点击响应范围 这个方法你还不知道吗？详细解释话你知

前言

一般我们在写网页的时候，总会遇到要用小图标来美化按钮的情况。

这时有些小伙伴可能想到的方法就是
用一个< a >标签包裹一个< i >或者其他标签元素
然后在子元素里面用图片来设置背景

但这时候就有个问题了！

你要扩大< a >标签的响应范围同时，要保持图标在正中央显示
如果精灵图里面每个图标的间隔都很大的话就很容易了
< a >标签多大，子元素也多大，然后用margin或者padding来定位就好了

但如果是遇到这种精灵图呢↓

我用的是王者荣耀官网的精灵图

假如我要用右上角的那个 加号图标

定位的方法

需要用两层标签
HTML：

<a href="#" class="b">
	<i></i>
</a>

CSS：

.b {
   
     display: block;
     position: relative;