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 左右空余區域縮小