在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 拥有最高的优先权。

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

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

Html5 布局方式的更多相关文章

  1. HTML5+CSS3常见布局方式

    1.等高布局 1.1 代码 等高布局是指子元素在父元素中高度相等的布局方式 <div class="father"> <div class="f1&qu ...

  2. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

  3. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  4. Android入门（十）：界面的布局方式及其实际应用

    关于Android界面布局,网上已经有了很多非常不错的学习资料,在这里我也不班门弄斧了,推荐两篇我认为写的不错的教程,然后再重点讲一下几种布局方式的实际应用. 教程链接:①http://www.cnb ...

  5. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

  6. 对比MFC资源文件谈谈WPF布局方式

    对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基 ...

  7. Android 开发之旅：view的几种布局方式及实践

    本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...

  8. 细谈CSS布局方式

    一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...

  9. Android 开发：view的几种布局方式及实践

    View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Tab ...

随机推荐

  1. John the ripper使用教程

    破解Linux的用户密码:John [跨平台的密码解密工具] root@only:~# unshadow /etc/passwd /etc/shadow > ~/file_to_crack ro ...

  2. HoloLens shell overview(Translation)

    HoloLens shell 概述 使用HoloLens时,shell是由你周围的世界和来自系统的全息图构成.我们可以称这个空间叫做混合现实(mixed world). 此shell由在你的世界里能让 ...

  3. Drools 规则学习

    Drools 规则学习 在 Drools 当中,一个标准的规则文件就是一个以“.drl”结尾的文本文件,由于它是一个标准的文本文件,所以可以通过一些记事本工具对其进行打开.查看和编辑.规则是放在规则文 ...

  4. Android自定义组件

    [参考的原文地址] http://blog.csdn.net/l1028386804/article/details/47101387效果图: 实现方式: 一:自定义一个含有EditText和Butt ...

  5. Service and controller in angularJs

    Separation of concern is at the heart while designing an AngularJS application. Your controller must ...

  6. mac linux 删除一个文件下边所有文件和文件夹

    sudo rm -r -f 目录

  7. C# asp.net 搭建微信公众平台（可实现关注消息与消息自动回复）的代码以及我所遇到的问题

    [引言] 利用asp.net搭建微信公众平台的案例并不多,微信官方给的案例是用PHP的,网上能找到的代码很多也是存在着这样那样的问题或者缺少部分方法,无法使用,下面是我依照官方文档写的基于.net 搭 ...

  8. The method setPositiveButton(int, DialogInterface.OnClickListener) in the type AlertDialog.Builder is not applicable for the arguments

    The method setPositiveButton(int, DialogInterface.OnClickListener) in the type AlertDialog.Builder i ...

  9. MongoDB CURD 介绍

    MongoDB是用JSON格式的field和value成对的documents存储数据,documents类似于编程语言中的key value 键值对(例如:dictionaries,hashes,m ...

  10. UBUNTU 16.04 编译 OPENJDK8

    参考了几篇文章,和错误查询,最后总结如下 一.下载 我比较倾向于使用mercurial来获取源代码,虽然你得挑网络稳定的时候更新,但是易更新. 从官网查找一下,可以通过以下步骤完成源代码的下载 1. ...