CSS作為網頁設計中不可或缺的一部分，常常需要對盒子進行移動以達到更好的布局效果。下面介紹CSS如何移動整個盒子。

首先，在HTML中定義一個div盒子，以及該盒子的內容，如下所示：

<div class="box">
<p>這是一個盒子</p>
</div>

然后，在CSS中設置該盒子的樣式，包括位置、大小、邊框、內外邊距、背景等等。要想移動整個盒子，只需修改盒子的位置屬性即可。位置屬性有兩種常用方式：

1. 基于左上角的絕對定位：

.box {
position: absolute;
top: 20px;
left: 50px;
}

在上述代碼中，設置盒子的位置屬性為absolute（絕對定位），并通過top和left屬性指定距離上邊和左邊各20px，實現整個盒子向下和向右移動。

2. 基于文檔流的相對定位：

.box {
position: relative;
top: 20px;
left: 50px;
}

在上述代碼中，設置盒子的位置屬性為relative（相對定位），并通過top和left屬性指定向下和向右各20px相對于原位置移動，實現整個盒子的移動。

通過以上示例可以看出，CSS移動整個盒子的實現原理就是通過修改位置屬性來達到目的。