按一下按钮两个div块换位置

要实现按一下按钮两个div块换位置的效果，我们可以利用JavaScript和CSS来实现。

在HTML中，我们需要创建两个div块，分别给它们设置不同的id，以便在JavaScript中进行操作。代码如下：

<div id="div1">Div1</div>
<div id="div2">Div2</div>
<button onclick="swapDivs()">按一下按钮</button>

接下来，我们需要在JavaScript中编写一个函数`swapDivs()`来实现两个div块的位置交换。我们需要获取到这两个div块的引用，可以通过`document.getElementById()`方法来获取。然后，我们可以使用CSS的`order`属性来交换它们的位置。代码如下：

function swapDivs() {
  var div1 = document.getElementById("div1");
  var div2 = document.getElementById("div2");
  var order1 = getComputedStyle(div1).getPropertyValue("order");
  var order2 = getComputedStyle(div2).getPropertyValue("order");
  div1.style.order = order2;
  div2.style.order = order1;
}

在这段代码中，我们首先通过`getComputedStyle()`方法获取到了两个div块的当前`order`属性值，然后将它们互相交换。

我们可以通过CSS来设置div块的样式，使其能够在页面中显示出来，并通过`order`属性来控制它们的位置。代码如下：

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
#div1 {
  order: 1;
}
#div2 {
  order: 2;
}

在这段CSS代码中，我们设置了div块的宽度、高度、边框样式，并使用`display: flex`来使它们成为一个flex容器。通过`justify-content: center`和`align-items: center`来使div块内部的内容居中显示。我们通过`order`属性来控制两个div块的初始位置。

当我们点击按钮时，`swapDivs()`函数会被调用，两个div块的位置会交换，从而实现了按一下按钮两个div块换位置的效果。

以上就是按一下按钮两个div块换位置的实现过程。通过JavaScript和CSS的配合，我们可以轻松实现这个功能。我们还可以根据实际需求，进一步优化代码，添加过渡效果或动画效果，使页面更加生动有趣。