今天在写项目的时候，遇到一个实现类似于QQ聊天输入框的需求。 在安卓端的聊天框内输入字符时，会将聊天框逐渐撑开，聊天框随后将底部向上撑开。 如下图所示：
在一开始我有些不太理解，因为当我们在给一个固定元素设置宽高后，该元素的高度和宽度随后发生改变时，则该元素的多出的高度往往会是往下延伸的，同时其多出的宽度是向右延伸的。如以下情况所示。
代码
<style>
div {
height: 100px;
transform:translate(600px,200px);
width: 100px;
transition: 1s;
}
div:hover {
height: 300px;
width:300px;
}
</style>
<body>
<div class="box3" style="background-color: green;"></div>
</body>
图像
变化后的图像
那么如何让元素向特定的方向延伸多出的宽高呢？ 答案是
定位
————————————————————————————————————————————————————————————————————————————————————————————我们通过给特定元素设置定位我们可以实现向任意方向延伸多出的宽度和高度。
- 设置left，则向右边延伸
- 设置right，则向左边延伸
- 设置top，则向下方延伸
- 设置bottom，则向上方延伸
代码
<style>
div {
position: absolute;
bottom:300px;/*设置底部定位 向上延伸*/
right:600px;/*设置右边定位 向左延伸*/
height: 100px;
/* transform:translate(600px,200px); */
width: 100px;
transition: 1s;
}
div:hover {
height: 300px;
width:300px;
}
</style>
<body>
<div class="box3" style="background-color: green;"></div>
</body>
原图
变化后的图像
经过今天的项目开发，使我对定位top，left的作用有了新的理解，top和left与其说是一种方位属性，更像是一种限定。除了文中的应用之外，在设置了left属性后，margin-right就会不起效果，往往需要我们给margin-left设置负值来和实现margin-right相似的效果。
以上算是本人的一个观察日记，对于其中的原理本人也不是十分清楚，如果有大牛明白希望赐教。共勉。
