[分享]css写标尺然后标注距离

在网页设计中，我们常常需要将元素进行规整排列，需要量取它们之间的距离。为了方便设计，我们可以使用CSS写标尺并标注距离。/ CSS样式 / .ruler { : absolute; top: 0; b...

在网页设计中，我们常常需要将元素进行规整排列，需要量取它们之间的距离。为了方便设计，我们可以使用CSS写标尺并标注距离。

/* CSS样式 */
.ruler {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
}

.ruler-vertical {
  width: 0;
  border-left: 1px solid #ccc;
}

.ruler-horizontal {
  height: 0;
  border-top: 1px solid #ccc;
}

.ruler-number {
  font-size: 12px;
  color: #999;
  position: absolute;
  pointer-events: none;
} 

以上CSS代码定义了三个类名：ruler、ruler-vertical和ruler-horizontal。ruler是标尺的父级元素，使用绝对定位使其覆盖在页面上，z-index和pointer-events属性使其不影响页面交互。ruler-vertical和ruler-horizontal分别用来表示垂直和水平方向上的标尺。

<!-- HTML结构 -->
<div class="ruler">
  <div class="ruler-vertical"></div>
  <div class="ruler-horizontal"></div>
</div> 

以上HTML代码表示了标尺的基本结构，我们将在CSS中设置其宽高及位置信息。

/* CSS样式 */
.ruler {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  pointer-events: none;
}

.ruler-vertical {
  width: 0;
  height: 100%;
  border-left: 1px solid #ccc;
}

.ruler-horizontal {
  width: 100%;
  height: 0;
  border-top: 1px solid #ccc;
}

.ruler-number {
  font-size: 12px;
  color: #999;
  position: absolute;
  pointer-events: none;
} 

在以上CSS代码中，我们设置了标尺的位置与宽高，同时还设置了标尺的样式。其中，ruler-number表示标尺上的刻度信息，我们将在JS中编写。

// JS代码
var ruler = document.querySelector('.ruler');
var rulerNumber = document.createElement('div');
rulerNumber.classList.add('ruler-number');
ruler.appendChild(rulerNumber);

var getDistance = function (start, end) {
  return Math.round(Math.sqrt(Math.pow((end.x - start.x), 2) + Math.pow((end.y - start.y), 2)));
}

var handleMove = function (e) {
  var rulerX = e.pageX - ruler.offsetLeft;
  var rulerY = e.pageY - ruler.offsetTop;
  rulerNumber.innerHTML = rulerX + 'px, ' + rulerY + 'px';
  rulerNumber.style.top = rulerY + 'px';
  rulerNumber.style.left = rulerX + 'px';
}

document.addEventListener('mousemove', handleMove); 

以上JS代码中，我们使用了事件监听来捕获鼠标移动的位置信息，并将标尺上的刻度信息显示在页面中。

在编写完以上HTML、CSS和JS代码后，我们就可以在页面上使用标尺来量取元素之间的距离了。