前端：六大H5常用结构元素

端在使用DIV+CSS布局时，通常需要通过为div命名的方式，来区分网页中不同的模块。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签，如header标签、nav标签、article标签等，具体介绍如下。

1. header标签

HTML5中的header标签是一种具有引导和导航作用的结构标签，该标签可以包含所有通常放在页面头部的内容。header标签通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。其基本语法格式如下：

<header>

  <h1>网页主题</h1>

    ...</header>

在上面的语法格式中，<header></header>的使用方法和<div class="header"></div>类似。

注意：

在HTML网页中，并不限制header标签的个数，一个网页中可以使用多个header标签，也可以为每一个内容块添加header标签。

2. nav标签

nav标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。nav标签的使用方法和普通标签类似，例如下面这段示例代码：

<nav>

  <ul>

        <li><a href="#">首页</li>

        <li><a href="#">公司概况</li>

        <li><a href="#">产品展示</li>

        <li><a href="#">联系我们</li>

  </ul></nav>

在上面这段代码中，通过在nav标签内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个nav标签，作为页面整体或不同部分的导航。具体来说，nav标签可以用于以下几种场合。

● 传统导航条：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。

● 侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

● 页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。

● 翻页操作：翻页操作切换的是网页的内容部分，可以通过点击“上一页”或“下一页”切换，也可以通过点击实际的页数跳转到某一页。

除了以上几点以外，nav标签也可以用于其他导航链接组中。需要注意的是，并不是所有的链接组都要被放进nav标签，只需要将主要的和基本的链接放进nav标签即可。

3. footer标签

footer标签用于定义一个页面或者区域的底部，它可以包含所有放在页面底部的内容。在HTML5出现之前，一般使用<div class="footer"></div>标签来定义页面底部，而现在通过HTML5的footer标签可以轻松实现。与header标签相同，一个页面中可以包含多个footer标签。

4. article标签

article标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。一个article标签通常有它自己的标题（可以放在header标签中）和脚注（可以放在footer标签中），例如下面的示例代码。

<article>

    <header>

    <h1>秋天的味道</h1>        
    
    <p>你想不想知道秋天的味道？它是甜、是苦、是涩...</p>

  </header>

    <footer>           
    
    <p>著作权归XXXXXX公司所有...</p>

  </footer></article>

需要注意的，在上面的示例代码中还缺少主体内容。主体内容通常会写在header和footer之间，通过多个section标签进行划分。一个页面中可以出现多个article标签，并且article标签可以嵌套使用。

5. section标签

section标签表示一段专题性的内容，一般会带有标题，主要应用在文章的章节中。例如，新闻的详情页有一篇文章，该文章有自己的标题和内容，因此可以使用article标签标注，如果该新闻内容太长，分好多段落，每段都有自己的小标题，这时候就可以使用section标签把段落标注起来。在使用section标签时，需要注意以下几点：

● section不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用div标签。

如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。

● 没有标题的内容模块不要使用section标签定义。

值得一提的是，在HTML5中，article标签可以看作是一种特殊的section标签，它比section标签更具有独立性，即section标签强调分段或分块，而article标签强调独立性。如果一块内容相对来说比较独立、完整时，应该使用article标签；但是如果想要将一块内容分成多段时，应该使用section标签。

6. aside标签

aside标签用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。aside标签的用法主要分为两种：

● 被包含在article标签内作为主要内容的附属信息。

● 在article标签之外使用，作为页面或网站的附属信息部分。最常用的的使用形式是侧边栏。

文概要

本文将介绍如下几种常见的布局：

一、单列布局

常见的单列布局有两种：

header,content 和 footer 等宽的单列布局
header 与 footer 等宽,content 略窄的单列布局

1.如何实现

对于第一种，先通过对 header,content,footer 统一设置 width：1000px;或者 max-width：1000px(这两者的区别是当屏幕小于 1000px 时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置 margin:auto 实现居中即可得到。

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
 background-color: blue; 
} 
.content{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 400px; 
 background-color: aquamarine; 
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px; 
 background-color: aqua; 
}

对于第二种，header、footer 的内容宽度不设置，块级元素充满整个屏幕，但 header、content 和 footer 的内容区设置同一个 width，并通过 margin:auto 实现居中。

<div class="header"> 
 <div class="nav"></div> 
</div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
 background-color: blue; 
} 
.nav{ 
 margin: 0 auto; 
 max-width: 800px; 
 background-color: darkgray; 
 height: 50px; 
} 
.content{ 
 margin: 0 auto; 
 max-width: 800px; 
 height: 400px; 
 background-color: aquamarine; 
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px; 
 background-color: aqua; 
}

二、两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

1.float+overflow:hidden

如果是普通的两列布局， 浮动+普通元素的 margin 便可以实现，但如果是自适应的两列布局，利用 float+overflow:hidden 便可以实现，这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下：

<div class="parent" style="background-color: lightgrey;"> 
 <div class="left" style="background-color: lightblue;"> 
 <p>left</p> 
 </div> 
 <div class="right" style="background-color: lightgreen;"> 
 <p>right</p> 
 <p>right</p> 
 </div> 
</div> 
.parent { 
overflow: hidden; 
zoom: 1; 
} 
.left { 
float: left; 
margin-right: 20px; 
} 
.right { 
overflow: hidden; 
zoom: 1; 
}

注意点:如果侧边栏在右边时，注意渲染顺序。即在 HTML 中，先写侧边栏后写主内容

2.Flexbox 布局

Flexbox 布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

//html部分同上 
.parent { 
display:flex; 
} 
.right { 
margin-left:20px; 
flex:1; 
}

3.Grid 布局

Grid 布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

//html部分同上 
.parent { 
display:grid; 
grid-template-columns:auto 1fr; 
grid-gap:20px 
}

三、三栏布局

特征：中间列自适应宽度，旁边两侧固定宽度 ，实现三栏布局有多种方式：

1.浮动布局

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>Layout</title> 
 <style media="screen"> 
 html * { 
 padding: 0; 
 margin: 0; 
 } 
 .layout article div { 
 min-height: 150px; 
 } 
 </style> 
</head> 
<body> 
 <!--浮动布局 --> 
 <section class="layout float"> 
 <style media="screen"> 
 .layout.float . left { 
 float: left; 
 width: 300px; 
 background: red; 
 } 
 .layout.float .center { 
 background: yellow; 
 } 
 .layout.float . right { 
 float: right; 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三栏布局</h1> 
 <article class="left-right-center"> 
 <div class="left"></div> 
 <div class="right"></div> // 右栏部分要写在中间内容之前 
 <div class="center"> 
 <h2>浮动解决方案</h2> 
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
 </div> 
 </article> 
 </section> 
</body> 
</html>

这种布局方式，dom 结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。

2.绝对定位布局

<!--绝对布局 --> 
 <section class="layout absolute"> 
 <style> 
 .layout.absolute . left-center- right>div{ 
 position: absolute;//三块都是绝对定位 
 } 
 .layout.absolute . left { 
 left:0; 
 width: 300px; 
 background: red; 
 } 
 .layout.absolute .center { 
 right: 300px; 
 left: 300px;//离左右各三百 
 background: yellow; 
 } 
 .layout.absolute . right { 
 right: 0; 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三栏布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>绝对定位解决方案</h2> 
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

绝对定位布局优点就是快捷，设置很方便，而且也不容易出问题。缺点就是，容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。

3.flexbox 布局

<!--flexbox布局--> 
 <section class="layout flexbox"> 
 <style> 
 .layout.flexbox .left-center- right{ 
 display: flex; 
 } 
 .layout.flexbox .left { 
 width: 300px; 
 background: red; 
 } 
 .layout.flexbox .center { 
 background: yellow; 
 flex: 1; 
 } 
 .layout.flexbox .right { 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三栏布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>flexbox解决方案</h2> 
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

flexbox 布局是 css3 里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用 flexbox。 flexbox 的缺点就是 IE10 开始支持，但是 IE10 的是-ms 形式的。

4.表格布局

<!--表格布局--> 
 <section class="layout table"> 
 <style> 
 .layout.table . left-center- right { 
 display: table; 
 height: 150px; 
 width: 100%; 
 } 
 .layout.table . left-center- right>div { 
 display: table-cell; 
 } 
 .layout.table . left { 
 width: 300px; 
 background: red; 
 } 
 .layout.table .center { 
 background: yellow; 
 } 
 .layout.table . right { 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三栏布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>表格布局解决方案</h2> 
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

表格布局的兼容性很好，在 flex 布局不兼容的时候，可以尝试表格布局。当内容溢出时会自动撑开父元素。

表格布局也是有缺陷:① 无法设置栏边距；② 对 seo 不友好；③ 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。

5.网格布局

<!--网格布局--> 
<section class="layout grid"> 
 <style> 
 .layout.grid .left-center- right { 
 display: grid; 
 width: 100%; 
 grid-template-columns: 300px auto 300px; 
 grid-template-rows: 150px;//行高 
 } 
 .layout.grid .left { 
 background: red; 
 } 
 .layout.grid .center { 
 background: yellow; 
 } 
 .layout.grid .right { 
 background: blue; 
 } 
 </style> 
 <h1>三栏布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>网格布局解决方案</h2> 
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
 </div> 
 <div class="right"></div> 
 </article> 
</section>

CSS Grid 是创建网格布局最强大和最简单的工具。就像表格一样，网格布局可以让 Web 设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。

但网格布局的兼容性不好。IE10+上支持，而且也仅支持部分属性。

6.圣杯布局

① 特点

比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是 dom 结构必须是先写中间列部分，这样实现中间列可以优先加载。

.container { 
 padding-left: 220px;//为左右栏腾出空间 
 padding-right: 220px; 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
 position: relative; 
 left: -220px; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
 position: relative; 
 right: -220px; 
} 
<article class="container"> 
 <div class="center"> 
 <h2>圣杯布局</h2> 
 </div> 
 <div class="left"></div> 
 <div class="right"></div> 
</article>

② 实现步骤

三个部分都设定为左浮动， 否则左右两边内容上不去，就不可能与中间列同一行 。然后设置 center 的宽度为 100%( 实现中间列内容自适应 )，此时，left 和 right 部分会跳到下一行

通过设置 margin-left 为负值让 left 和 right 部分回到与 center 部分同一行

通过设置父容器的 padding-left 和 padding-right，让左右两边留出间隙。

通过设置相对定位，让 left 和 right 部分移动到两边。

③ 缺点

center 部分的最小宽度不能小于 left 部分的宽度，否则会 left 部分掉到下一行
如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决，下文会介绍)

7.双飞翼布局

① 特点

同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

.container { 
 min-width: 600px;//确保中间内容可以显示出来，两倍 left宽+ right宽 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.center .inner { 
 margin: 0 200px; //新增部分 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
} 
<article class="container"> 
 <div class="center"> 
 <div class="inner">双飞翼布局</div> 
 </div> 
 <div class="left"></div> 
 <div class="right"></div> 
</article>

② 实现步骤(前两步与圣杯布局一样)

三个部分都设定为左浮动，然后设置 center 的宽度为 100%，此时，left 和 right 部分会跳到下一行；
通过设置 margin-left 为负值让 left 和 right 部分回到与 center 部分同一行；
center 部分增加一个内层 div，并设 margin: 0 200px；

③ 缺点

多加一层 dom 树节点，增加渲染树生成的计算量 。

④ 圣杯布局和双飞翼布局实现方式对比:

两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位 ; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

四、等高列布局

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。

1.利用背景图片

这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。

在制作样式之前需要一张类似下面的背景图：

<div class=”container clearfix”> 
 <div class=”left”></div> 
 <div class=”content”></div> 
 <div class=”right”></div> 
</div> 
.container { 
background: url("column.png") repeat-y; 
width: 960px; 
margin: 0 auto; 
} 
.left { 
float: left; 
width: 220px; 
} 
.content { 
float: left; 
width: 480px; 
} 
.right { 
float: left; 
width: 220px; 
}

2.利用正padding+负margin

我们通过等布局便可解决圣杯布局的第二点缺点，因为背景是在 padding 区域显示的，设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下：

.center, 
 .left, 
 .right { 
 padding-bottom: 10000px; 
 margin-bottom: -10000px; 
 } 
 .container { 
 padding-left: 220px; 
 padding-right: 220px; 
 overflow: hidden;//把溢出背景切掉 
 }

3.模仿表格布局

这是一种非常简单，易于实现的方法。不过兼容性不好，在ie6-7无法正常运行。

 <div class="container table"> 
 <div class="containerInner tableRow"> 
 <div class="column tableCell cell1"> 
 <div class="left aside"> 
 .... 
 </div> 
 </div> 
 <div class="column tableCell cell2"> 
 <div class="content section"> 
 ... 
 </div> 
 </div> 
 <div class="column tableCell cell3"> 
 <div class="right aside"> 
 ... 
 </div> 
 </div> 
 </div> 
 </div> 
.table { 
width: auto; 
min-width: 1000px; 
margin: 0 auto; 
padding: 0; 
display: table; 
} 
.tableRow { 
display: table-row; 
} 
.tableCell { 
display: table-cell; 
width: 33%; 
} 
.cell1 { 
background: #f00; 
height: 800px; 
} 
.cell2 { 
background: #0f0; 
} 
.cell3 { 
background: #00f; 
}

4.使用边框和定位

这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。结构简单，兼容各浏览器，容易掌握。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。

#wrapper { 
width: 960px; 
margin: 0 auto; 
} 
#mainContent { 
border-right: 220px solid #dfdfdf; 
position: absolute; 
width: 740px; 
height: 800px; 
background: green; 
} 
#sidebar { 
background: #dfdfdf; 
margin-left: 740px; 
position: absolute; 
height: 800px; 
width: 220px; 
} 
<div id="wrapper"> 
 <div id="mainContent">...</div> 
 <div id="sidebar">...</div> 
</div>

五、粘连布局

1.特点

有一块内容 <main> ，当 <main> 的高康足够长的时候，紧跟在 <main> 后面的元素 <footer> 会跟在 <main> 元素的后面。
当 <main> 元素比较短的时候(比如小于屏幕的高度),我们期望这个 <footer> 元素能够“粘连”在屏幕的底部

具体代码如下：

main

footer

* { 
 margin: 0; 
 padding: 0; 
 } 
 html, 
 body { 
 height: 100%;//高度一层层继承下来 
 } 
 #wrap { 
 min-height: 100%; 
 background: pink; 
 text-align: center; 
 overflow: hidden; 
 } 
 #wrap .main { 
 padding-bottom: 50px; 
 } 
 #footer { 
 height: 50px; 
 line-height: 50px; 
 background: deeppink; 
 text-align: center; 
 margin-top: -50px; 
 }

2.实现步骤

(1)footer 必须是一个独立的结构，与 wrap 没有任何嵌套关系

(2)wrap 区域的高度通过设置 min-height，变为视口高度

(3)footer 要使用 margin 为负来确定自己的位置

(4)在 main 区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

参考文章

双飞翼布局介绍-始于淘宝 UED
CSS 三栏布局的四种方法
CSS 两列布局---左侧固定，右侧自适应
两列自适应布局的四种思路
css 常见布局之九：三栏布局的常见实现
【布局】聊聊为什么淘宝要提出「双飞翼」布局
CSS 的单列布局与二&三列布局
八种创建等高列布局

TML中常用的布局元素：<table>、<div>+CSS

<table>标签：

<table>指的是表格，用表格来搭建界面布局，即用表格的嵌套，来搭建界面布局。

<table>布局优势：

table优势：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题；内容可自适应；在搜索引擎排名能靠前；

但是 table如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；table嵌套的太多，运维是非常困难的。

<div>块级（block-level）标签：

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。

<div>布局优势：

一.精简代码，减少重构难度。

网站使用DIV+CSS布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

二.网页访问速度

使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。

三.SEO优化

采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

四.浏览器兼容性

若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。

HTML中常用的3种布局方式：

1.流动式布局：是HTML网页默认的布局方式

特点：

1.块级元素都会在所处的包含元素内自上而下按顺序处置延伸分布，且默认状态下，块级元素占整个文档流，默认宽度为100%。

2.内联元素都会在所处的包含元素内从左到右水平分布显示，不占整个文档流。

常见的块级（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol

常见的内内联（行内）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>

2.浮动布局（float）

特点：

浮动布局依靠【浮动属性 float：left/right/... 】来使标签脱离文档流，达到两个块级元素并排显示的效果。

float：left ；浮动脱离当前文档流浮动。

同时可以依靠【展示属性display：inline/block/inline-block】来进行行内元素和块级元素的效果切换。从而达到灵活运用块级元素和行内元素布局的效果。

3.层模型布局又叫定位布局

特点：

当我们应拥div布局是，在第一层块界面上来做第二层块界面的开发时，就要用到我们所说的定位布局。

通过运用【定位属性position:absolute/relative/fixed】来进行第二层界面的定位布局。

网页是静态的，网页上的定位

position：absolute ；绝对定位脱离文档流，不受浮动影响，就是相对于窗体（body）边界的margin定位。

position：relative；相对定位不脱离文档流，相对于父级标签元素的位置定位。

position:fixed；固定位置，不会受任何因素影响。

滚动条移动前

滚动条移动后

优先层显示方法：【属性：z-index:0/1/2...】

特点：数值越大，越优先显示。

注意：只有元素使用了position属性的，才具有z-index属性。

本文部分内容来自网络，如有侵权，请联系修改。

在线咨询

上一篇：HTML添加背景音乐(embed、audio)
下一篇：HTML 之简介

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端：六大H5常用结构元素

TML中常用的布局元素：<table>、<div>+CSS

HTML中常用的3种布局方式：

您的项目需求