初學html和css後編寫前端頁面的時候遇到了兩個控制項混亂的問題，這兩個問題在瀏覽器全屏模式都不會表現出來，所以一開始我也還沒有注意到，我覺得值得記錄一下。
1.在頁面插入背景圖的時候，背景圖會隨著瀏覽器的縮放而等比例縮放，如果頁面上只有一張背景圖，這樣就沒關係，但如果背景圖的頁面上還有其他控制項，這樣在其他控制項的位置不改變或者不同等地和背景圖一起改變的時候，整個頁面就會變得非常不美觀，使用者體驗就會非常差。
2.在編寫頁面的時候，對瀏覽器就行縮放的時候，頁面上的控制項會自動換行，導致整個頁面中的控制項有一種看起來非常臃腫的感覺，使用者體驗很差。
relative相對定位：如果對乙個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素「相對於」它的起點進行移動。
absolute絕對定位：絕對定位是「相對於」最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼「相對於」最初的包含塊。
fixed固定定位：固定定位是將某個元素固定在瀏覽器的某個確定的位置，相對當前瀏覽器視窗的（這點很重要）。
問題2的解決方法很簡單，給塊設定乙個最小長度或寬度即可解決自動換行的問題。
float布局導致頁面混亂
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...
導致頁面布局混亂的幾個元凶
盒子模型塌陷 子元素設定外間距margin top，導致父元素連帶向下，如下圖 如下 box1 box2 解決方法 1.給父元素設定border border top 2.給父元素設定padding padding top 3.給父元素設定overflow hidden 父元素高度塌陷 當父元素未設...
通過 media解決不同解析度，布局混亂問題
利用 media screen實現網頁布局的自適應 優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小。只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值 1280解析度以上 大於1200px media screen and min width ...