實戰案例：DIV嵌套_html/css

div作為布局元素，它與表格一樣是可以嵌套的。因為瀏覽器對于任何元素的解析方式都是一樣的，一般從最里層開始，然后不斷向外解析。當嵌套層級很深時，將會使瀏覽器消耗更多的資源對嵌套關系進行解析，勢必會影響瀏覽器的速度。

對于一個上下三行的布局結構：

為了實現頁面固定寬度和居中顯示效果，分別給三個div設置css樣式就有點麻煩了，我們可以給它嵌套一個div層：

實際上這種增加一層div嵌套的方法，肯定會給瀏覽器的顯示帶來負擔，我們可以將body元素作為一個外套,這樣就能充分發揮body的作用，以免造成浪費。

又比如：要給上述頂部頁眉部分加一個導航條：

上述代碼是最優化的么？當然不是，ul元素與div元素一樣都是塊狀元素，一個導航菜單外面嵌套兩層元素，勢必會產生代碼冗余，如果沒有被定義的特殊樣式，我們完全可以這樣寫：

　　這種情況就是最優的。但是，這樣做存在一定的風險，可能需要使用更多的css樣式來控制整個元素的顯示。如果多嵌套一層，對頁面布局會有更大的幫助，能節省大量不必要的css控制代碼，此時布局的功能重要性就遠大于結構的功能性。

總之，在我們大力提倡盡力減少div元素的多次嵌套時，是針對當前網頁設計中設計師亂套div元素的現狀而說的，但并不是談套色變，必要的嵌套是應該的，也是必須的！

補充：頁面語義化操作：

1、XHTML結構的語義性

2、構建語義化頁面操作

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com