CSS中哪些负值使用具有有趣的特性？

5 min read

CSS中负值可以用于许多有趣的特性，下面列举几个例子：

  1. 将元素向左或向上移动：通过将left或top属性设置为负值，可以将元素移动到左边或上方。例如：
div {
  position: relative;
  top: -20px;
  left: -10px;
}
  1. 改变文本方向：使用direction属性来改变文本流方向。设置为rtl（right-to-left）时，文本流从右向左。例如：
span {
  direction: rtl;
}
  1. 实现超出父容器元素显示：通过设置position属性为relative或absolute，并将left或top属性设置为负值，可以将元素移动到父容器元素之外并显示出来。例如：
.parent {
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 100px;
}

.child {
  position: relative;
  left: -50px;
  width: 150px;
  height: 100px;
}
  1. 旋转元素：使用transform属性来旋转元素。通过设置rotate值为负值，可以实现反向旋转。例如：
div {
  transform: rotate(-45deg);
}

上述是CSS中负值的几个用例，有时并不是每个都严格意义上为“好玩的特性”，但这些技巧可以让你更灵活地控制样式和排版。