做小方块效果 要求:1.小方块活动范围在边框里 2.小方块靠近边框可以吸上去

可以通过HTML、CSS和JavaScript实现小方块效果。以下是一个简单的实现方法：

HTML部分：

<div id="container">
  <div id="block"></div>
</div>

CSS部分：

#container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  position: relative;
}

#block {
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
  top: 140px;
  left: 140px;
  border: 1px solid #000;
}

JavaScript部分：

var block = document.getElementById("block");
var container = document.getElementById("container");

document.addEventListener("keydown", function(event) {
  var x = parseInt(block.style.left) || 0;
  var y = parseInt(block.style.top) || 0;

  switch(event.keyCode) {
    case 37: // 左
      x = Math.max(x - 10, 0);
      break;
    case 38: // 上
      y = Math.max(y - 10, 0);
      break;
    case 39: // 右
      x = Math.min(x + 10, container.clientWidth - block.offsetWidth);
      break;
    case 40: // 下
      y = Math.min(y + 10, container.clientHeight - block.offsetHeight);
      break;
  }

  block.style.left = x + "px";
  block.style.top = y + "px";
});

container.addEventListener("mousemove", function(event) {
  var x = event.clientX - container.offsetLeft - block.offsetWidth / 2;
  var y = event.clientY - container.offsetTop - block.offsetHeight / 2;

  if (x < 0) {
    x = 0;
  } else if (x > container.clientWidth - block.offsetWidth) {
    x = container.clientWidth - block.offsetWidth;
  }

  if (y < 0) {
    y = 0;
  } else if (y > container.clientHeight - block.offsetHeight) {
    y = container.clientHeight - block.offsetHeight;
  }

  block.style.left = x + "px";
  block.style.top = y + "px";
});

通过以上的代码，可以实现小方块在边框内的移动，并且可以靠近边框吸附。其中，键盘事件控制小方块的上下左右移动，鼠标移动事件控制小方块的靠近边框吸附效果。