在Html5之前，統一采用的是Div+css的方式進行布局，但是卻和開發人員的命名方式，喜好有關。在新的Html5中，布局卻顯得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside標簽，很容易一眼就知道對應的功能是什么。布局效果如下：
涉及的元素，說明如下：HTML5 提供的新語義元素定義了網頁的不同部分：
HTML5 語義元素
| header |
定義文檔或節的頁眉 |
| nav |
定義導航鏈接的容器 |
| section |
定義文檔中的節 |
| article |
定義獨立的自包含文章 |
| aside |
定義內容之外的內容（比如側欄） |
| footer |
定義文檔或節的頁腳 |
| details |
定義額外的細節 |
| summary |
定義 details 元素的標題 |
具體不多說，布局對應的Html代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>關於Web頁的Html5布局</title> 5 <style type="text/css"> 6 header 7 { 8 background-color:orange; 9 color:White; 10 text-align:center; 11 height:120px; 12 padding:5px; 13 } 14 nav 15 { 16 line-height:30px; 17 background-color:Lime; 18 height:400px; 19 width:15%; 20 float:left; 21 padding:0px; 22 } 23 aside 24 { 25 background-color:Gray; 26 width:15%; 27 height:400px; 28 float:right; 29 padding:0px; 30 } 31 section 32 { 33 width:70%; 34 height:400px; 35 background-color:Purple; 36 float:left; 37 padding:0px; 38 } 39 footer 40 { 41 background-color:Fuchsia; 42 height:120px; 43 color:White; 44 clear:both; 45 text-align:center; 46 padding:5px; 47 } 48 ul 49 { 50 list-style-type:none; 51 } 52 .sp 53 { 54 width:15px; 55 padding:5px; 56 } 57 a 58 { 59 text-decoration:blink; 60 } 61 </style> 62 </head> 63 <body> 64 <header> 65 <h1>這里是Header,一號標題</h1> 66 <div> 67 <a href="#">菜單1</a><span class="sp">|</span> 68 <a href="#">菜單2</a><span class="sp">|</span> 69 <a href="#">菜單3</a><span class="sp">|</span> 70 <a href="#">菜單4</a><span class="sp">|</span> 71 <a href="#">菜單4</a><span class="sp">|</span> 72 <a href="#">菜單5</a><span class="sp">|</span> 73 <a href="#">菜單6</a><span class="sp">|</span> 74 <a href="#">菜單7</a><span class="sp"> 75 </div> 76 </header> 77 <nav> 78 <ul> 79 <li><a href="#">鏈接1</a></li> 80 <li><a href="#">鏈接2</a></li> 81 <li><a href="#">鏈接3</a></li> 82 <li><a href="#">鏈接4</a></li> 83 </ul> 84 </nav> 85 <section> 86 <h1> 87 這里是正文</h1> 88 <p> 89 這里是段落1</p> 90 <p> 91 這里是段落2</p> 92 </section> 93 <aside> 94 <h1> 95 這里是側邊框</h1> 96 <p> 97 這里是段落1</p> 98 <p> 99 這里是段落2</p> 100 </aside> 101 <footer> 102 這里是頁腳 103 </footer> 104 </body> 105 </html>
關於Padding , Border,Margin之間的關系，如下圖所示：
關於樣式的層疊順序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
- 瀏覽器缺省設置
- 外部樣式表
- 內部樣式表（位於 <head> 標簽內部）
- 內聯樣式（在 HTML 元素內部）
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味着它將優先於以下的樣式聲明：<head> 標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。