1.當(dāng)div元素實現(xiàn)了左右居中時袜匿，當(dāng)hover的時候設(shè)置width增大，那么寬度會默認從中間向兩側(cè)增加稚疹。（例子中的 id=d1）
2.一個未進行任何設(shè)置的div元素居灯，當(dāng)hover的時候設(shè)置width增大，那么寬度會默認向右增加内狗。（例子中的 id=d2）
3.當(dāng)div元素設(shè)置了margin:0 0 0 auto怪嫌，當(dāng)hover的時候設(shè)置width增大，那么寬度會默認從右向左增加柳沙。（例子中的 id=d3）
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
margin: auto;
background-color: red;
width:130px;
transition: all 1s linear;
}
#d2{
background-color: #5cb85c;
width:120px;
transition: all 1s linear;
}
#d3{
margin: 0 0 0 auto;
background-color: orange;
width:120px;
transition: all 1s linear;
}
#d1:hover,#d2:hover,#d3:hover{
width:300px;
}
</style>
</head>
<body>
<div id="d1">從中間向兩端 d1</div>
<div id="d2">從左向右 d2</div>
<div id="d3">從右向左 d3</div>
</body>
</html>