当元素宽度增加时，如何实现“向右增加”，“向左增加”，“从中间向两侧增加”。

1.当div元素实现了左右居中时，当hover的时候设置width增大，那么宽度会默认从中间向两侧增加。（例子中的 id=d1）

2.一个未进行任何设置的div元素，当hover的时候设置width增大，那么宽度会默认向右增加。（例子中的 id=d2）

3.当div元素设置了margin:0 0 0 auto，当hover的时候设置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>