前端：六大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種布局方式：

您的項目需求

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