1. 程式人生 > >頁面佈局混亂問題及解決

頁面佈局混亂問題及解決

  初學html和css後編寫前端頁面的時候遇到了兩個控制元件混亂的問題,這兩個問題在瀏覽器全屏模式都不會表現出來,所以一開始我也還沒有注意到,我覺得值得記錄一下。

  1.在頁面插入背景圖的時候,背景圖會隨著瀏覽器的縮放而等比例縮放,如果頁面上只有一張背景圖,這樣就沒關係,但如果背景圖的頁面上還有其他控制元件,這樣在其他控制元件的位置不改變或者不同等地和背景圖一起改變的時候,整個頁面就會變得非常不美觀,使用者體驗就會非常差。

  2.在編寫頁面的時候,對瀏覽器就行縮放的時候,頁面上的控制元件會自動換行,導致整個頁面中的控制元件有一種看起來非常臃腫的感覺,使用者體驗很差。

  問題1的解決主要是要用到樣式的定位知識,在查閱了相關知識點後解決了這個問題,接下來整理一下三種定位的知識。

relative相對定位:如果對一個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素“相對於”它的起點進行移動。

absolute絕對定位:絕對定位是“相對於”最近的已定位祖先元素,如果不存在已定位的祖先元素,那麼“相對於”最初的包含塊。

fixed固定定位:固定定位是將某個元素固定在瀏覽器的某個確定的位置,相對當前瀏覽器視窗的(這點很重要)。

問題2的解決方法很簡單,給塊設定一個最小長度或寬度即可解決自動換行的問題。