div標籤究竟該嵌套幾層？

01-25

div是起到包裹承載的作用，可是有時候明明一個div里嵌套已經嵌套了div和span標籤等內容，可為什麼還要在這個最外層的div外面再嵌套一個div，這是為什麼呢？
代碼如下：
&

&
&

34.5 MB&
&&
&

&

因為他們中了「div+css」的毒。

& & & & & & && & & & & & & & & & module:header/container & & & & & & & …… & & & &

& & & &

我做項目，如上面代碼處理（注釋有開始結尾標識）：

1、首先「page-wrapper」，整個頁面的包裹；position:relative;

2、再「page-header」、「page-container」、「page-footer」、「page-pendant」(左右懸浮)，頁頭建議處理成往下滾動隱藏，往上滾動顯示，或者頁頭高度縮減absolute；

3、再「section」，100%的寬度，可設置通欄背景；

4、再"section-wrapper"，定寬布局時的寬度；

5、再「module-wrapper」，具體業務模塊和組件。

如果是大的站點，加「site-topbar、site-header、site-footer」。

簡而言之：

頁面 -「頭、主體、尾、懸浮等區域」- 區域包裹各塊 - 塊內包裹具體業務模塊和組件

後話：

1、結構層：考慮到語義可用html5里header、footer、article、section、aside之類標籤，而不是一味的div。

2、內容層：標題根據權重用h1~h6，段落和文本用p，著重strong，列表ul dl ol，em i我用來處理小圖標了，而圖標用的web font，行內元素span。

3、更多，請參閱：無廢話網頁重構系列

以上了。

在能實現相同效果的前提下, 標籤越少越好...

我用過挺多這種布局的，比如外面的div是背景圖片，裡面的div是背景色，1000寬度，居中顯示的情況。很多時候就是為了實現效果。

CSS功力不夠，DIV數量來湊。

首先，結構要具有可拓展性，以便於的標籤的添加與刪減、不同頁面間的復用。

第二，複雜的結構（題主認為的複雜），便於布局的修改，背景色等CSS的修改。

理解以上東西的方法很簡單，照著某一門戶網站，自己用HTML和CSS擼下來。

擼的期間要注意CSS的結構和復用，HTML的結構和復用。

最後看源代碼，對比自己的代碼，反思總結。