在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. 深入理解定时器系列——被誉为神器的requestAnimationFrame

    与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详 ...

  2. Uboot+Linux启动时间优化

    动机 设备启动时间往往是项目立项时的一项重要技术指标.快速的启动时间意味着设备宕机时间的缩短,系统的快速恢复,也能改善用户使用时的体验感受,是一项重要的市场竞争力. 准备 优化启动时间之前,我们首先要 ...

  3. 【BZOJ1497】[NOI2006]最大获利 最小割

    裸的最小割,很经典的模型. 建图:要求总收益-总成本最大,那么将每条弧与源点相连,流量为成本,每个收益与汇点相连,流量为收益,然后每条弧与它所能到达的收益相连,流量为inf. 与源点相连的是未被选中的 ...

  4. canvas小结

    前段时间在公司没什么事干,研究了一下canvas,在实际开发中还没正式应用过,但是已经深深感觉到其魅力之处.下面写一写我认为canvas中比较重要的点,如有理解错误,欢迎指正. 首先canvas是h5 ...

  5. 线程的Alertable与User APC

    在使用插User APC注入DLL时,经常面临一个问题,那就是线程必须是处于Alertable模式才能注入成功.但一直对这个Alertable的含义不甚清楚,今天总算是把这个梗消化了. 微软对Aler ...

  6. 运行jar应用程序引用其他jar包的四种方法

    转载地址:http://www.iteye.com/topic/332580 大家都知道一个java应用项目可以打包成一个jar,当然你必须指定一个拥有main函数的main class作为你这个ja ...

  7. 【转载】用Ionic开发hybrid APP

    使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势.而且私以为在目前激烈而又变化快速的移动 ...

  8. 关于C#的微信开发的入门记录二

    在准备了空间和域名之后,现在来讲讲我们接下来的编码过程: 今天就先到这里了!没有服务器那些的请看我之前的博客:http://www.cnblogs.com/zhankui/p/4515905.html ...

  9. JVM垃圾收集器

    JVM中垃圾的回收由垃圾收集器进行,随着JDK的不断升级,垃圾收集器也开发出了各种版本,垃圾收集器不断优化的动力,就是为了实现更短的停顿. 下面是7种不同的分代收集器,如果两个收集器之间有连线,则表示 ...

  10. *HDU1850 博弈

    Being a Good Boy in Spring Festival Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32 ...