概述

在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。本文以一个简单的小例子，简述Html5的布局相关知识，仅供学习分享使用，如有不足之处，还请指正。

HTML5 语义元素

涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分：

html5 基础模版 html5范例_ide

示例效果图

布局效果如下：

html5 基础模版 html5范例_html5 基础模版_02

布局源码

布局对应的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之间的关系，如下图所示：

html5 基础模版 html5范例_html_03

样式的层叠远近顺序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS样式设置顺序

关于CSS样式，当样式要作用于四个方向或四条边时，可单独设置，也可以统一设置，如下所示：

设置一个值，统一作用于四条边，如下所示：

html5 基础模版 html5范例_html5_04

设置两个值，第1个值代表上，下，第2个值代表右，左，如下所示：

html5 基础模版 html5范例_ide_05

 设置三个值，代表顺序，上，右，下，第四个值为空，和右保持一致，如下所示：

html5 基础模版 html5范例_html5_06

 设置四个值，代表顺序，上，右，下，左，依次分别设置，如下所示：

html5 基础模版 html5范例_html_07

 在一个声明中，设置所有属性的值，顺序依次为：border-width,border-style,border-color，如：border，如下所示：

html5 基础模版 html5范例_html_08