实现聊天气泡主要有两个注意点:
①是根据字体数量自适应框的长度
②字体到框有边距,也就是为了美观
这篇博客主要讲实现的思路,不讲聊天气泡的三角突出点,如下所示:
三角突出点通过简单的border去设置就可以得到了
第一个注意点根据字体数量自适应框的长度
我们可以使用display:inline-block
去实现,这样聊天框具有块和行内元素的特点
第二个注意点是字体到框之间的边距,即如图中的这段距离所示:
我们可以通过padding
去设置这个边距,通过设置边距,会使得聊天框撑大起来,让聊天框看起来更好看
注意,四周都要设置padding
padding:5px; 上右下左都设置了5个像素