盒子的选择、移动和预览
通过阅读这一章的内容，你将会掌握以下三个问题的答案：
- 如何选择盒子？
- 如何移动盒子？
- 如何预览页面效果？
选择
在页面上，你可以随意的选择元素。通过选中元素，可以编辑这个元素的相关属性和设置。
选择有3种方式：
- 直接点击
- 鼠标右键
- 盒模型结构导航（界面底部）
当选中元素的时候，被选中的元素，就会出现蓝色的边框，高亮显示。
移动
如果你想移动一个元素，只需要选中，然后拖拽到目标位置即可。
拖拽元素的过程中，有些元素会高亮显示。
- 蓝色代表目标位置
- 橙色代表目标盒子
当你松开鼠标的时候，元素就会被放入目标盒子内部。
预览
预览的目的就是所见即所得。在编辑网页的时候，网页上的动画，视频等内容会被暂时停止。一来不会干扰编辑，二来可以节省资源，让编辑器相应更快，使用起来更流畅。
点击界面左上角的“眼睛”图标，即可进入预览模式。
在预览模式中，左右两边界面被收起来，只剩下顶部面板。
这时候看到的网页，就是真实网站上线后的效果。
如果还想把顶部面板隐藏，可以点击左上角的“向上箭头”图标，隐藏顶部面板。
在预览模式下，就不能编辑盒子和元素。需要再次点击“眼睛”图标，退出预览模式，进入编辑模式。
总结
- 可以通过3种方式来选择盒子：直接选择，鼠标右键，以及使用下方的盒子面包屑。
- 通过拖拽就可以移动盒子。
- 预览可以看到页面真实的效果。
- 可以通过切换，预览网页在不同设备上的效果。