极客观点
项目管理
HarmonyOS
http://jsfiddle.net/dont27/G8FRx/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=UTF-8"/>
<title>菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
margin:0 auto;
text-align:center;
}
.father{
width: 200px;
height: 200px;
background-color: #ffff00;
border: 1px solid #000;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: #0000ff;
border: 1px solid #ff0000;
position: absolute;
top: 20px;
left: 20px;
right:-70px;
}
</style>
</head>
<body>
<div>
<div class="father">
<div class="son">
</div>
</div>
</div>
</body>
</html>
在设置absolute定位的时候，原本设置了left:20px; ,后来又加了right, 可是这个时候，div居然出现了margin，其实是chrome才这样，firefox直接显示的是left和right数值不一样。
一般情况下，同时设置了left跟right，应该是right被忽略。后来发现原来是div设置了margin:auto
不知道这个怎么解释，是否能提供相关资料查看？
magrin:0 auto中auto的用处就是左右根据窗口自适应的。首先指出来题主所说的
Chrome和Firefox不一样，其实是一样的，只不过Firefox把两个值相加了而已。那么我来研究下
margin:0 auto是怎么对son这个div起作用的。1.只有
left: 20px属性时，效果如下：2.只有
right：-70px属性时，效果如下：3.当同时有
left: 20px和right: -70px时，效果如下：看到第三张图时，我相信题主已经知道这是怎么一回事了，
margin:0 auto，左右自适应居中的效果而已。只不过这个居中不像外层father的div是相对窗口自适应，而是相对于由自己的left和right属性所开创出来的一块区域而言。为了比较，可以对比下外层
div自适应的效果图：