首先说下scale属性的优点吧，当我们使用width属性扩大盒子时，是会影响到后面盒子的位置。但是当使用scale放大盒子时，跟translate属性一样，不会影响后面盒子的位置。然后我们着重讲解一下对于子父盒子分别通过不同的方法变化大小时对彼此的影响吧。 先看代码： css代码：
<style>
body {
text-align: center;
}
.father {
display: inline-block;
margin: 200px auto;
/* width: 500px; */
/* height: 200px; */
padding: 50px;
background-color: blue;
}
.son {
margin: auto;
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
html代码：
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
在代码中，便于观察变化，我们将父盒子显示模式设置为行内块，不设置宽高，使其大小自动根据子盒子变化。 显示如下：
此时父盒子高宽为200。
下面我们扩大子盒子，先修改其width、height属性来看看对父盒子的影响。
将width、height修改为200px，相当于各扩大了一倍。
可以看到父盒子也是随着扩大的。
下面我们通过scale扩大子盒子来看看影响效果：
可以看到此时父盒子并没有扩大，只是子盒子扩大了。
修改完了子盒子，我们再来看看修改父盒子的属性对子盒子的影响。
修改CSS代码为：
因为设置了padding缘故，父盒子大小为200200，小盒子为100100
下面我们通过修改width与height扩大父盒子，
可以看到仅仅是父盒子大小变化了，而子盒子大小不变。
下面我们设置scale属性来扩大父盒子。
下面是显示效果：
Surprise！！！惊不惊喜意不意外，子盒子也被等比例扩大了。
好了，我们总结一下：
设置父盒子width，height，只影响父盒子，不影响子盒子。
设置父盒子scale属性，会影响子盒子大小。
设置子盒子width，height属性，在父盒子动态扩大时，会影响父盒子，父盒子写死不影响。
设置子盒子sacle属性，不会影响父盒子。
