在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. ActiveMQ

    前言 MQ--Message Queue,中文翻译为"消息队列",维基百科上的这样描述: 消息队列(英语:Message queue)是一种进程间通信或同一进程的不同线程间的通信方 ...

  2. shell处理输入

    1.在运行脚本时指定参数,直接在脚本名称后边跟随需要添加的参数,在运行的过程中,$0代表程序名,$1代表第一个参数,$2代表第二个参数,一直到第九个,从第十个参数开始需要变成${10}等,即需要添加花 ...

  3. sql中查询中的when...then 语句

    ),jbrq, ),'/','-')as jbrq, ' then '启用' when ' then '未启用' else '修改' end cbzt,shzt from jc_yscbfxb sel ...

  4. TF-IDF算法确定阅读主题词解答英语阅读Title题目

    #include <math.h> #include <time.h> #include <stdlib.h> #include <iostream> ...

  5. 2016windows（10） wamp 最简单30分钟thrift入门使用讲解，实现php作为服务器和客户端的hello world

    2016最简单windows(10) wamp 30分钟thrift入门使用讲解,实现php作为服务器和客户端的hello world thrift是什么 最简单解释 thrift是用来帮助各个编程语 ...

  6. 【读书笔记】《编程珠玑》第一章之位向量&位图

    此书的叙述模式是借由一个具体问题来引出的一系列算法,数据结构等等方面的技巧性策略.共分三篇,基础,性能,应用.每篇涵盖数章,章内案例都非常切实棘手,解说也生动有趣. 自个呢也是头一次接触编程技巧类的书 ...

  7. 前端小知识~~关于css3新增知识~~归纳总结

    1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...

  8. CSS hack技巧大全

    ——作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 I ...

  9. 一键保存Feedly里的文章到有道笔记

    写在之前:今天升级了有道笔记3.5,发现有道笔记支持发邮件保存笔记了,所以就分享一下怎么通过IFTTT保存到有道笔记.因为IFTTT是外国货,所以一直没有有道笔记的频道,不过有了发邮件保存笔记的功能, ...

  10. perl学习之路1

    一切要从Hollo world开始 公司要用perl....啊, 不会只能自学了, 毕竟是公司啊, 不是学校...公司不学习就滚蛋了...惨惨惨 因为是学习嘛, 感觉开虚拟机比较麻烦所以直接用了个 瘟 ...