幾乎所有的web開發人員都使用html編輯過網頁，也知道htm元素具體是什麼效果，儘管如此，但是很多時候，開發人員需要的頁面布局和頁面效果卻依然不是按照自己想要的效果出現。之所以產生這樣的問題很大的原因是開發人員在了解自己或客戶需要的效果之後，就會受這些頁面效果的影響失去考慮頁面結構的能力。
我們很多人都知道html是一種樹形結構的，任何一本關於html的書籍的開篇都會提到這個概念。但是很多web開發者在開發過程中卻會經常遇到因為這個概念所出現頁面布局和排版問題。
如下圖中，你作為乙個web開發者，是使用那種html元素如何進行塊分割的呢？
布局方法一：
問題一：
將所有的div元素並列放在同乙個元素中，這樣的問題，每當螢幕解析度改變之後，設定的樣式就會發生變化。例如我的螢幕是1366*768的，如果我將上述的布局放在1280*768就會出現問題，如下圖所示：
這只是表面看會有上述問題，這樣的問題是比較基礎，我們開發過程中自己進行測試的時候通常都能發現。但是下面這種情況卻只有在某種特定的情況才會被發現。
問題二：如下圖所示：
之所以出現這樣的問題，原因其實和上面出現的問題的原因是一樣的，都是錯誤的將各個元素並列放在同乙個元素中。
上述的理由可能很多有過web開發的人很容易就能明白原因所在，這裡我給大家簡單介紹一下：第乙個問題是因為左欄的margin-left固定所致。第二個問題的出現是因為第三個右欄浮動的時候將本來應該由左欄佔盡的位置沒有站導致。
如何解決上述問題呢？很簡單，將我們潛意識裡隱藏的塊"顯示"出來，如下所示
絢麗頁面效果如果沒有基本的布局也會讓人感到不適。所以關於頁面如何布局，其實在web頁面開發中占有重要的位置，特別是對於乙個系統而言，為了系統的頁面統一，頁面布局就顯更為重要。
今天我們暫時寫這麼多，謝謝閱讀！
Web頁面該如何布局
幾乎所有的web開發人員都使用html編輯過網頁，也知道htm元素具體是什麼效果，儘管如此，但是很多時候，開發人員需要的頁面布局和頁面效果卻依然不是按照自己想要的效果出現。之所以產生這樣的問題很大的原因是開發人員在了解自己或客戶需要的效果之後，就會受這些頁面效果的影響失去考慮頁面結構的能力。我們很多...
web頁面布局思想
網頁可以看成由乙個個 盒子 組成，如圖 盒子模型的相關屬性 margin 外邊距 邊界 border 邊框 padding 內邊距 填充 我們看圖理解一下各屬性作用 盒模型的層次關係 我們通過乙個經典的盒模型3d立體結構圖來理解，如圖 從上往下看，層次關係如下 第1層 盒子的邊框 border 第2...
web頁面布局總結
幾乎完全參考 掘金 web網頁布局的主要方式 即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫 時的布局來顯示。常規的pc的 都是靜態 定寬度 布局的，也就是設定了min width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個...