DIV + CSS 到底是什麼意思？

01-15

已經學完HTML,在學習CSS。現在常常遇到Div＋Css，但是不知道什麼意思。我自己搜索查了很多，說是Div就是取代〈table〉的，還要說搜索引擎喜歡Div，反正很多。能不能簡單的說一下Div＋Css（或者Div）什麼意思？為什麼用它？為什麼不用〈table〉?

在很久很久以前，web工程師通過table進行頁面布局（現在Google的picasa等應用還能找到table布局應用的例子），現在頁面布局大都推薦div+css方式。

所謂的div+css是指通過css控制div的布局。其實這兒div可以理解為統稱，實際應用的不僅是div，還有p，span，img，table等任意節點的定位都可以通過css來控制。

簡要對比一下：

1、div+css相對於table更為靈活，用table布局，代碼臃腫。

2、語義性問題。從語義上來說，table應該只是表格數據的容器，不應該是布局的工具。

3、樣式渲染問題。table布局要等內容全部載入完畢後才渲染樣式，如果用戶網速不好，這樣用戶體驗會很差。

拙見。歡迎指正。

在WEB前端開發中,HTML,CSS,JS這三家三駕馬車分別代表著結構，展示，和交互。

在web1.0的時代，頁面的邏輯並不是特別複雜，對用戶體驗的要求也不是很高，table被大量開發者用來做布局元素，橫跨結構和展示兩個部分，是很「重」的。

但是在如今web前端邏輯越來越複雜，用戶體驗要求越來越高的情況下，對這三者的解耦是必須的。此時再用table拿來做布局就不太合適了，因為table標籤的語言根本不是用來做布局的，而是用來傳遞數據的。而div+css是符合解耦這一思想的，div用來控制布局，css用來控制樣式。好處從小了說是整個頁面的代碼組織結構更合理，耦合度更低，從大了說是更利於前端開發的深度分工和複雜合作。

其它渲染，SEO方面就不重複了。核心是解耦，認識不到這一點，不算入門了前端開發。

公司企業網站建設製作之DIV+CSS布局對於網站優化有什麼好處！

代碼精簡使用DIV+CSS布局，頁面代碼精簡，這一點對XHTML有所了解的都知道。代碼精簡所帶來的直接好處有兩點：一是提高spider爬行效率，能在最短的時間內爬完整個頁面，這樣對收錄有更好的作用。

使用DIV+CSS布局，頁面代碼精簡，這一點對XHTML有所了解的都知道。代碼精簡所帶來的直接好處有兩點：

一是提高spider爬行效率，能在最短的時間內爬完整個頁面，這樣對收錄質量能提高;

二是由於能高效的爬行，就會受到spider喜歡，對收錄數量有一定提高。

對排名的影響

基於XTHML標準的DIV+CSS布局，一般在設計完成後會儘可能的完善到能通過W3C驗證。截止目前沒有搜索引擎表示排名規則會傾向於符合W3C標準的網站或頁面，但事實證明使用XTHML架構的網站排名狀況一般都不錯。這一點或許會有爭議，但樂思蜀本人保持這樣的觀點，有異議者可以拿三組以上基本同等質量的網站對比觀察。

避免表格的嵌套問題;很多SEO在其文章中稱，搜索引擎一般不抓取三層以上的表格嵌套，這一點一直沒有得到搜索引擎官方的證實。我的幾項實驗結果沒有完全出來，但根據目前掌握的情況來看，spider爬行Table布局的頁面，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。

使用Table布局，為了達到一定的視覺效果，不得不套用多個表格。如果嵌套的表格中是核心內容，spider爬行時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及域名信任度。

而DIV+CSS布局基本上不會存在這樣的問題，從技術角度來說，HTML在控制樣式時也不需要過多的嵌套。這雖然沒有得到確認，但還是建議使用Table布局的朋友們，在設計時儘可能的不要使用多層表格嵌套，SEOer們在文章中說明了這一點，相信他們也不是沒有依據的。

速度問題

DIV+CSS布局與Table布局減少了頁面代碼，載入速度得到很大的提高，這在spider爬行時是很有利的。過多的頁面代碼可能會造成爬行超時，spider就會認為這個頁面是無法訪問的，影響收錄及權重。

另一方面，真正的SEO優化不只是為了收錄、排名。能快速的響應速度是提高用戶體驗度的基礎，這對整個搜索引擎優化及營銷都是非常有利的。

這種情況應該不是排名規則，最大的可能還是spider爬行網站時，出現以上差異導致收錄質量的不同。

本文已經分享完畢！感謝閱讀與支持！如果您還有興趣的話，可以找找我之前寫過的一篇文章《王晴兒:談談企業應如何避免低價網站建設製作貓膩與騙局？》，讓您減少被建站公司忽悠80%的幾率，可以讓您對建站行業有個更加清晰的認識。

既然您來到這裡，看完了我分享的文章，那就是一種緣分，也是一種說不出的緣分。歡迎大家一起交流與進步，如果說得不好之處，歡迎各位拍磚與指正，謝謝！如果您有網頁UI設計、企業建站、電商視覺設計、淘寶網店裝修方面的問題，可以找王晴兒交流探討。雖已從業7年，但是仍不忘初心，我的座右銘：越努力，越幸運！越溝通，越親近！合作不合作不要緊，合作不成情意在，我也很喜歡結交各行各業的朋友。

一句話解釋：DIV是框架，CSS是樣式，用來裝飾框架。

JS讓它們動起來。

DIV+CSS如其字面意思，就是網頁HTML代碼主要使用DIV將內容模塊化，用CSS控制其顯示效果。

好處很多，從前端層面來說，大大減輕工作量，提高工作效率。

從界面布局來將，能夠更準確的將頁面元素定位，且保證在不同的環境下獲得基本一致的效果。

還有比如你說的SEO方面的原因，實際上這個應該更多指的語意化標籤。

其他的請樓下補充。

前端的製作常常會涉及到一個問題，就是定位布局。

按照頁面設計圖來進行定位的話，在以往是用TABLE的方式，也就是將整個頁面當做一張大表格，然後哪個地方需要放置什麼元素就在表格里放置那個元素。

CSS 是層疊式樣式表，是對HTML元素比如p,h1，還有div之類的進行描述，描述這些元素的表示方式。

DIV是一個塊級元素，所以它本身具有一個框模型，框模型可以搜索了解一下。通過CSS對這個塊進行定位可以達到以前用TABLE的效果。

因為TABLE標籤是表示表格的意思，用來做定位布局就失去了這個HTML標籤原本的意思，所以對於搜索引擎來說不是那麼友好，因為搜索引擎會把這一個頁面當做是一個表格。

現在有了DIV一般就不會用TABLE來做定位布局了。

div裡面裝的是內容

css是樣式，是控制杯子形狀用的

web前端開發，div就是給整個網頁布局，css就是負責控制div的樣式，想讓div在哪裡怎麼顯示，都可以通過css來實現，簡單的說網頁布局就像蓋房子，div負責把這棟房子蓋起來，而css負責告訴他怎麼蓋！