如今显示器的分辨率越来越多，终端也变得多样化web开发页面的自适应问题越来越多，如果不做处理一旦显示器的分辨率发生变化，展示的内容可能出现许多意料之外的排版问题关于不同终端的展示问题可以通过响应式布局来实现，而不需要响应式布局时我们需要自己来避免上述问题

2、如果网站頭部有图片展示，那就不能简单设置宽度为 100%会出现 repeat 的情况，或者图片大小超出最外层容器宽度此时可以设置最外层容器宽度为固定值：960px、980px、1000px等，并设置 margin:0 auto ；
3、如果觉得在较大分辨率的显示器上显示 960px 宽度显得不够大方美观可以根据不同的分辨率设置不同的宽度（同样要设置 margin:0 auto），并制作相应大小的图片替换即可：

2、有时网页的填充内容会根据不同的权限或者数据的完整程度显示出不一样的大小，这样我們就需要比较页面的大小和显示器的分辨率高度再做相应的调整：

3、如果页面有页脚（版权信息等），采用情况2的方法可能会使页脚悬于頁面中间这时，页面往往会是 header、main、footer 这样的结构在外面会有一个外层容器 container，方法2就是设置该外层容器的高度当然，我们可以在获取到 container 嘚新的高度之后减去 header 和 footer 的高度就可以设置 main 的高度了这样可以避免 footer

这样结合上面宽度进行设置时，发现设置了 position 之后margin:0 auto就失效了，因为脱离叻文档流的缘故所以我们需要设置 container 的 margin-left 为宽度的一半的负值即可，即：