概述
在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。本文以一个简单的小例子，简述Html5的布局相关知识，仅供学习分享使用，如有不足之处，还请指正。
HTML5 语义元素
涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分：
示例效果图
布局效果如下：
布局源码
布局对应的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>
CSS小知识
元素内间距，边框，外间距之间的关系
关于Padding , Border,Margin之间的关系，如下图所示：
样式的层叠远近顺序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS样式设置顺序
关于CSS样式，当样式要作用于四个方向或四条边时，可单独设置，也可以统一设置，如下所示：
设置一个值，统一作用于四条边，如下所示：
设置两个值，第1个值代表上，下，第2个值代表右，左，如下所示：
设置三个值，代表顺序，上，右，下，第四个值为空，和右保持一致，如下所示：
设置四个值，代表顺序，上，右，下，左，依次分别设置，如下所示：
在一个声明中，设置所有属性的值，顺序依次为：border-width,border-style,border-color，如：border，如下所示：
备注
谒金门·风乍起
【作者】冯延巳 【朝代】五代
风乍起，吹皱一池春水。
闲引鸳鸯香径里，手挼红杏蕊。
斗鸭阑干独倚，碧玉搔头斜坠。
终日望君君不至，举头闻鹊喜。
