胖蔡说技术我们可以在CSS中通过abs()函数返回参数的绝对值，需要注意的是abs()函数属于一个实验性功能，在使用之前需要确认浏览器是否支持。
浏览器兼容
如下表格给出abs()在各个浏览器的兼容情况，视情况选择是否使用。
| 浏览器 | 是否支持 |
| Chrome | 不支持 |
| Edge | 部分支持(15.6版本) |
| Firefox | 不支持 |
| Opera | 不支持 |
| Safari | 不支持 |
| webkit android | 不支持 |
使用
abs(x) 函数只接受一个值作为其参数。其使用方式如上。
/* property: abs(expression) */
width: abs(20% - 100px);
h1 {
font-size: abs(var(--font-size));
}
abs可以配合其他方法使用，如可以设置css变量，可以通过abs函数实现获取变量的绝对值，实现如动画的两种方向的显示加载的功能。
案例
案例源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>CSS abs()函数的使用【仅仅支持edge 15.6版本】</title>
<style>
:root {
--normal-font-size:20px;
}
.abs {
padding: 30px;
display: inline-block;
width: 300px;
height: 300px;
background-color:aqua;
color: white;
font-size: var(--normal-font-size);
position: relative;
}
.abs .text {
margin-top: abs(var(--normal-font-size));
position: absolute;
}
</style>
</head>
<body>
<div class="abs">
<span class="text">CSS abs()函数的使用 </span>
</div>
</body>
</html>点击访问GitHub仓库源码。
