實戰案例:DIV嵌套_html/css
來源:懂視網
責編:小采
時間:2020-11-27 16:15:45
實戰案例:DIV嵌套_html/css
實戰案例:DIV嵌套_html/css_WEB-ITnose:緣于頁面結構語義化的考慮,我們應該慎用div和span這兩個通用元素,只有當劃分頁面結構模塊時才使用div元素,因為模塊本身是沒有任何語義的,他僅代表一塊獨立的結構。如果想對段落內部分內聯元素或文本應用某種特殊樣式時,就可以使用span元素把他們獨立封裝
導讀實戰案例:DIV嵌套_html/css_WEB-ITnose:緣于頁面結構語義化的考慮,我們應該慎用div和span這兩個通用元素,只有當劃分頁面結構模塊時才使用div元素,因為模塊本身是沒有任何語義的,他僅代表一塊獨立的結構。如果想對段落內部分內聯元素或文本應用某種特殊樣式時,就可以使用span元素把他們獨立封裝

緣于頁面結構語義化的考慮,我們應該慎用div和span這兩個通用元素,只有當劃分頁面結構模塊時才使用div元素,因為模塊本身是沒有任何語義的,他僅代表一塊獨立的結構。如果想對段落內部分內聯元素或文本應用某種特殊樣式時,就可以使用span元素把他們獨立封裝在一個容器內。
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
實戰案例:DIV嵌套_html/css
實戰案例:DIV嵌套_html/css_WEB-ITnose:緣于頁面結構語義化的考慮,我們應該慎用div和span這兩個通用元素,只有當劃分頁面結構模塊時才使用div元素,因為模塊本身是沒有任何語義的,他僅代表一塊獨立的結構。如果想對段落內部分內聯元素或文本應用某種特殊樣式時,就可以使用span元素把他們獨立封裝