Blogin ·

[前端开发]详解HTML聊天对话框的实现

💡 原文中文，约3400字，阅读约需9分钟。

📝

内容提要

本文介绍了CSS中的常用知识点，包括:before和:after伪元素、position属性和border属性的用法。通过示例代码和解释，详细说明了它们的功能和用法。

🔎

文章示例中，聊天对话框左侧的小箭头通过:before伪元素实现。该伪元素设置position:absolute，并利用border属性绘制三角形。这体现了伪元素常与定位结合，用于生成装饰性内容而不影响HTML结构。理解这种配合有助于实现类似对话框的视觉效果。

相对定位使元素相对于自身原始位置偏移，通过top、left等属性控制移动方向和距离。绝对定位则相对于最近的已定位父元素定位，若不存在则相对于根元素。两者在布局中用途不同：相对定位常用于微调位置，绝对定位用于精确放置或覆盖。

当元素宽高为0时，四个边框在角落处呈45度交汇，形成四个三角形。通过将不需要的边框颜色设为透明，可保留特定方向的三角形。例如，要得到指向左侧的箭头，需设置border-right颜色，其他边框透明。注意border简写需在border-*之前定义，否则会覆盖单独设置的边框样式。

❓

:before伪元素用于在目标元素前添加内容，:after伪元素用于在目标元素后添加内容。例如，可以通过它们为元素添加文本或装饰。

position属性有五个值：static、relative、fixed、absolute和sticky。relative是相对定位，元素相对于其原始位置移动；absolute是绝对定位，元素相对于最近的已定位父元素定位，如果没有则相对于<html>。

将元素的宽高设为0，设置四个方向的边框宽度和颜色，边框交界处会形成45度斜线，从而产生三角形。通过将不需要的边框颜色设为透明，可以保留特定方向的三角形。

需要哪个朝向的三角形，就定义相反方向的border-*颜色，并将其他方向的边框颜色设为透明。例如，要制作向左的三角形，就定义border-right为有颜色，其他方向透明。

border必须在border-*前面定义，如果border定义在border-*后面，则会覆盖掉border-*的样式。

可以使用:before伪元素，设置content为空，绝对定位，通过border属性制作一个三角形，并调整位置和颜色使其指向左侧。

🏷️