CSS偏移反爬案例 自如

CSS偏移反爬，是指利用CSS技术，将防抓取的数据向下或向上移动，从而躲避爬虫抓取工具的获取。这种技术在反爬中被广泛应用，可以有效地防止爬虫抓取。下面介绍一下“自如”公司的CSS偏移反爬案例。

ul > li{
    position:relative;
    padding-left:20px;
    &:before{
        content: ';
        display: block;
        position: absolute;
        top: 3px;
        left: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ea6f5a;
    }
}

上面的代码模拟了从自如网站获取的房屋信息列表样式。其中使用了相对定位和绝对定位，实现了小圆点偏移的视觉效果。这种偏移技术可以有效防止爬虫的获取。

如果不使用CSS偏移反爬技术，那么获取房屋信息将非常容易，只需要使用爬虫软件即可获取全部数据。但是，自如通过CSS技术，将小圆点移动到了内容区域之外，用肉眼或者普通的抓取工具无法获取到偏移的小圆点，从而防止了爬虫工具的抓取。

总之，CSS偏移反爬技术可以非常有效的防止爬虫工具的获取，提高网站信息的安全性。通过相对定位和绝对定位实现偏移，可以优化网站用户体验，同时提高信息保护的效果。