網頁可以看成由乙個個"盒子"組成，如圖：
盒子模型的相關屬性
margin（外邊距/邊界）
border（邊框）
padding（內邊距/填充 ）
我們看圖理解一下各屬性作用：
盒模型的層次關係
我們通過乙個經典的盒模型3d立體結構圖來理解，如圖：
從上往下看，層次關係如下：
第1層：盒子的邊框(border)，
第2層：元素的內容(content)、內邊距(padding)
第3層：背景圖(background-image)
第4層：背景色(background-color)
第5層：盒子的外邊距(margin)
從這個層次關係中可以看出，當同時設定背景圖和背景色時，背景
圖將在背景色的上方顯示
水平居中和垂直居中
水平居中包含兩種情況：
塊級元素的水平居中：margin:0px auto;
文字內容的水平居中：text-align: center;
垂直居中：
常見的單行文字的垂直居中可設定文字所在行的height與
行高樣式屬性一致，比如：
div
web頁面布局總結
幾乎完全參考 掘金 web網頁布局的主要方式 即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫 時的布局來顯示。常規的pc的 都是靜態 定寬度 布局的，也就是設定了min width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個...
Web頁面該如何布局
幾乎所有的web開發人員都使用html編輯過網頁，也知道htm元素具體是什麼效果，儘管如此，但是很多時候，開發人員需要的頁面布局和頁面效果卻依然不是按照自己想要的效果出現。之所以產生這樣的問題很大的原因是開發人員在了解自己或客戶需要的效果之後，就會受這些頁面效果的影響失去考慮頁面結構的能力。我們很多...
移動WEB的頁面布局
隨著移動網際網路的日益普遍，現在移動版本的web應用也應用而生，那麼在做移動web頁面布局的過程中，應該注意哪些要點呢？現把個人的一些學習經驗總結如下 1px 2dp dp dpr dpi ppi ios的viewport為980px 布局 layout viewport 檢視 visual vie...