CSS作为网页设计中不可或缺的一部分，常常需要对盒子进行移动以达到更好的布局效果。下面介绍CSS如何移动整个盒子。

首先，在HTML中定义一个div盒子，以及该盒子的内容，如下所示：

<div ><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移动整个盒子的实现原理就是通过修改位置属性来达到目的。