返回

CSS 测试 03 阅后笔记 - 技术指南，为您揭秘 CSS 基础！

前端

CSS 测试 03 阅后笔记

前言

这是张鑫旭老师的 CSS 基础测试 4 的阅后笔记。首先，我要感谢 XboxYan 的解答，堪称模板。另外，还有几位同学的解答也各有亮点：yaeSakuras、maomao1996。

正文

最基础的实现

先来看看这个气泡小尾巴的实现。

.tooltip {
  position: relative;
}

.tooltip:hover .tooltip-content {
  display: block;
}

.tooltip-content {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 120%;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #000;
  display: none;
}

优化

我们可以通过使用 CSS3 的 calc() 函数来实现更灵活的定位。

.tooltip-content {
  position: absolute;
  left: calc(50% - 50px);
  bottom: calc(100% + 10px);
  background-color: #fff;
  padding: 10px;
  border: 1px solid #000;
  display: none;
}

这样，我们就能够根据气泡小尾巴的宽度和高度来调整其位置。

总结

以上就是 CSS 测试 03 的阅后笔记。希望对大家有所帮助。

参考资料