css+div定位，缩小浏览器的窗口，页面就乱了

一：万能解决方案：

最近在写网页的时候遇到一种情况，css+div在做定位的时候，跟着浏览器的窗口缩小，页面就跟着浮动了，乱七八糟 的，搜了一圈找到了一个解决办法，完美解决：
由于我做的浮动是绝对定位（position:absolute），在外边加一个div层（给它一个父级），外边的div层加上相对定 位（position:relative），然后再去调整子级的位置（top，left等）。这一次，无论你怎么去缩小你的窗口都会岿然不 动的！
示例如下：

 

原始的结构：
<div class=”ceshi”>
<div class=”ceshi01″ style=”position:absolute;left:100px; bottom:0px;”></div>
<div class=”ceshi02″ style=”position:absolute;left:100px; bottom:0px;”></div>
</div>
修改后的结构：
<div class=”ceshi” style=”position:relative;”>
<div class=”ceshi01″ style=”position:absolute;left:100px; bottom:0px;”></div>
<div class=”ceshi02″ style=”position:absolute;left:100px; bottom:0px;”></div>
</div>

 

二：案例分析：

(1):第一类分析： 浏览器缩放是对最外层等比例缩放，有可能在低版本浏览器会出现错位

1. 内部容器宽度设置超出了外部容器宽度；
 
2. 内部多个并列容器宽度相加超出了外部容器宽度；
 
3. 外部容器设置了固定width，内部容器固定width、margin、padding相加等于外部容器宽度，但是忘记了把border边框加在里面；

 

 

 

(2):第二类分析：错位的位置对padding  margin 左右空余区域缩小