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

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

width: 1200px; margin: 0 auto;

加上这两句结果如下图所示： 【方法二】 如下图所示，缩小窗口，页面布局全部打乱 在body的css中加上这两句话，当窗口最小宽度min-width <1200px 时，会生成导航条将内容隐藏，但是页面的排版布局不会乱

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

结果如下图所示

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

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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。