在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。布局效果如下：
涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素
|
header |
定义文档或节的页眉 |
|
nav |
定义导航链接的容器 |
|
section |
定义文档中的节 |
|
article |
定义独立的自包含文章 |
|
aside |
定义内容之外的内容（比如侧栏） |
|
footer |
定义文档或节的页脚 |
|
details |
定义额外的细节 |
|
summary |
定义 details 元素的标题 |
具体不多说，布局对应的Html代码如下：
<!DOCTYPE html>
<html>
<head>
<title>关于Web页的Html5布局</title>
<style type="text/css">
header
{
background-color:orange;
color:White;
text-align:center;
height:120px;
padding:5px;
}
nav
{
line-height:30px;
background-color:Lime;
height:400px;
width:15%;
float:left;
padding:0px;
}
aside
{
background-color:Gray;
width:15%;
height:400px;
float:right;
padding:0px;
}
section
{
width:70%;
height:400px;
background-color:Purple;
float:left;
padding:0px;
}
footer
{
background-color:Fuchsia;
height:120px;
color:White;
clear:both;
text-align:center;
padding:5px;
}
ul
{
list-style-type:none;
}
.sp
{
width:15px;
padding:5px;
}
a
{
text-decoration:blink;
}
</style>
</head>
<body>
<header>
<h1>这里是Header,一号标题</h1>
<div>
<a href="#">菜单1</a><span class="sp">|</span>
<a href="#">菜单2</a><span class="sp">|</span>
<a href="#">菜单3</a><span class="sp">|</span>
<a href="#">菜单4</a><span class="sp">|</span>
<a href="#">菜单4</a><span class="sp">|</span>
<a href="#">菜单5</a><span class="sp">|</span>
<a href="#">菜单6</a><span class="sp">|</span>
<a href="#">菜单7</a><span class="sp">
</div>
</header>
<nav>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
</ul>
</nav>
<section>
<h1>
这里是正文</h1>
<p>
这里是段落1</p>
<p>
这里是段落2</p>
</section>
<aside>
<h1>
这里是侧边框</h1>
<p>
这里是段落1</p>
<p>
这里是段落2</p>
</aside>
<footer>
这里是页脚
</footer>
</body>
</html>
关于Padding , Border,Margin之间的关系，如下图所示：
关于样式的层叠顺序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。