Web頁面該如何布局

幾乎所有的web開發人員都使用html編輯過網頁，也知道htm元素具體是什麼效果，儘管如此，但是很多時候，開發人員需要的頁面布局和頁面效果卻依然不是按照自己想要的效果出現。之所以產生這樣的問題很大的原因是開發人員在了解自己或客戶需要的效果之後，就會受這些頁面效果的影響失去考慮頁面結構的能力。

我們很多人都知道html是一種樹形結構的，任何一本關於html的書籍的開篇都會提到這個概念。但是很多web開發者在開發過程中卻會經常遇到因為這個概念所出現頁面布局和排版問題。

如下圖中，你作為乙個web開發者，是使用那種html元素如何進行塊分割的呢？

布局方法一：

上述布局乙個熟練的web開發者一眼就能看出問題。

問題一：

將所有的div元素並列放在同乙個元素中，這樣的問題，每當螢幕解析度改變之後，設定的樣式就會發生變化。例如我的螢幕是1366*768的，如果我將上述的布局放在1280*768就會出現問題，如下圖所示：

這只是表面看會有上述問題，這樣的問題是比較基礎，我們開發過程中自己進行測試的時候通常都能發現。但是下面這種情況卻只有在某種特定的情況才會被發現。

問題二：如下圖所示：

之所以出現這樣的問題，原因其實和上面出現的問題的原因是一樣的，都是錯誤的將各個元素並列放在同乙個元素中。

上述的理由可能很多有過web開發的人很容易就能明白原因所在，這裡我給大家簡單介紹一下：第乙個問題是因為左欄的margin-left固定所致。第二個問題的出現是因為第三個右欄浮動的時候將本來應該由左欄佔盡的位置沒有站導致。

如何解決上述問題呢？很簡單，將我們潛意識裡隱藏的塊"顯示"出來，如下所示

上述的布局相對於之前的布局僅僅是多了幾個div進行包括，僅僅是將幾個"樹葉"的"樹杈"寫了出來。正式因為有了這幾個"樹杈"的作用，如果我們再新增乙個"樹葉"那麼就不會出現不知道為什麼本該在這個"樹杈"上的"樹葉"卻長到了那個"樹杈上"。

絢麗頁面效果如果沒有基本的布局也會讓人感到不適。所以關於頁面如何布局，其實在web頁面開發中占有重要的位置，特別是對於乙個系統而言，為了系統的頁面統一，頁面布局就顯更為重要。

今天我們暫時寫這麼多，謝謝閱讀！