在设计页面的时候发现，页面中的元素会随着页面的调整而移动。
功能实现：在一个页面中定义了三个界面框。
调整前：
调整后：
这样调整以后效果好多了。
实现代码：（可能还有改进的地方，但是起码问题解决了，另外其中最主要的原因是将body标签设置了宽度、高度，能够将三个盒子包围，使其构成一个整体，当然也不必非要将body 设置成一个整体，不必将div设置成固定显示格式，可以上通过设置ID实现，大家可以自行探索一下）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型测试</title>
<style class="text/css">
div{
display:inline-block;
height: 200px;
width:300px;
border: solid 5px red;
margin: 4px;
}
body{
width:1050px;
height:220px;
border:none;
}
div{
float: left;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>