解决HTML缩小窗口页面内容排版全部打乱问题

【方法一】
下图缩小窗口排版全乱

给body 加上这两行代码，让上下外边距为0，左右两个外边距自动相等，和方法二结果相同，给隐藏的部分加上导航条。

width: 1200px;
margin: 0 auto;

加上这两句结果如下图所示：
【方法二】
如下图所示，缩小窗口，页面布局全部打乱

在body的css中加上这两句话，当窗口最小宽度min-width <1200px 时，会生成导航条将内容隐藏，但是页面的排版布局不会乱

	width: 100%;
    min-width: 1200px;

结果如下图所示

【方法三】
使用流式布局（也是百分比布局）
所有盒子的宽度都使用百分比，这样的话你缩小窗口，盒子会根据百分比自适应大小，盒子随着窗口的缩小而缩小。

注意： 所有盒子的宽度都要使用百分比，若只是大盒子设置百分比，小盒子使用像素，页面排版还是会乱！！！