div 純 CSS 移動是一種使用 CSS 進行頁面布局的技術，它允許開發人員通過簡單的拖拽和旋轉操作來移動和調整網頁中的元素。在本文中，我們將介紹如何使用 div 純 CSS 移動來移動和調整網頁中的元素。
div 純 CSS 移動的基本工作原理是通過在需要移動的元素上添加一個 div 標簽，并在其中應用 CSS 樣式來實現的。這些樣式包括定位、邊框樣式、陰影、顏色等等。通過將這些樣式應用到 div 元素中，就可以使元素在特定方向上移動和旋轉。
以下是一個簡單的 div 純 CSS 移動示例，它將一個帶有垂直邊框的文本框移動到頁面的頂部：
<div class="move-up">
<p>Hello, World!</p>
</div>
在上面的代碼中，我們使用了 class ="move-up" 來定義一個名為 "move-up" 的 div 元素，并應用了以下 CSS 樣式：
.move-up {
position: relative;
width: 200px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
.move-up p {
position: absolute;
top: 50%;
transform: translateY(-50%);
在上面的代碼中，我們使用了 "position: relative" 來使 div 元素具有相對定位，并使用 "width: 200px; height: 100px;" 和 "border: 1px solid black;" 來定義元素的大小和邊框樣式。同時，我們使用了 "margin: 0 auto;" 來使元素在水平方向上居中。
接下來，我們使用 "position: absolute;" 來使 p 元素具有絕對定位，并將其放置在垂直方向上的 50% 位置。最后，我們使用 "top: 50%; transform: translateY(-50%);" 來將元素向上移動 50%。
通過應用這些樣式，我們就可以使文本框移動到頁面的頂部。要將其移動到另一個位置，只需重新應用樣式即可。
除了基本移動，div 純 CSS 移動還可以用于旋轉元素。例如，以下代碼將元素旋轉 90 度：
.move-up {
position: relative;
width: 200px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
.move-up p {
position: absolute;
top: 50%;
transform: translateY(-50%);
transform: rotate(-90deg);
在上面的代碼中，我們使用了 "position: relative;" 來使 div 元素具有相對定位，并使用 "width: 200px; height: 100px;" 和 "border: 1px solid black;" 來定義元素的大小和邊框樣式。同時，我們使用了 "margin: 0 auto;" 來使元素在水平方向上居中。
最后，我們使用 "transform: rotate(-90deg);" 來將元素旋轉 90 度。
通過使用 div 純 CSS 移動，我們可以輕松地移動和調整網頁中的元素，從而實現更復雜的布局。