div是框架，css是樣式，用來(lái)裝飾框架；詳細(xì)點(diǎn)來(lái)說(shuō)，div就是給整個(gè)網(wǎng)頁(yè)布局，css就是負(fù)責(zé)控制div的樣式，想讓div在哪里怎么顯示，都可以通過(guò)css來(lái)實(shí)現(xiàn)。而div+css是一種網(wǎng)頁(yè)布局方法，是指通過(guò)css控制div的布局。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

div 是框架，css 是樣式，用來(lái)裝飾框架。JS 讓它們動(dòng)起來(lái)。再說(shuō)詳細(xì)點(diǎn)，div就是給整個(gè)網(wǎng)頁(yè)布局，css 就是負(fù)責(zé)控制div的樣式，想讓 div 在哪里怎么顯示，都可以通過(guò) css 來(lái)實(shí)現(xiàn)，簡(jiǎn)單的說(shuō)網(wǎng)頁(yè)布局就像蓋房子，div 負(fù)責(zé)把這棟房子蓋起來(lái)，而 css 負(fù)責(zé)告訴他怎么蓋！

而DIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁(yè)的布局方法，是指通過(guò) css 控制 div 的布局。其實(shí)這兒 div 可以理解為統(tǒng)稱，實(shí)際應(yīng)用的不僅是div，還有p，span，img，table 等任意節(jié)點(diǎn)的定位都可以通過(guò) css 來(lái)控制。

為什么用div+css取代〈table〉

很久很久以前，web 工程師通過(guò) table 進(jìn)行頁(yè)面布局（現(xiàn)在Google 的 picasa 等應(yīng)用還能找到table布局應(yīng)用的例子），現(xiàn)在頁(yè)面布局大都推薦 div+css 方式。

在WEB前端開發(fā)中,HTML,CSS,JS 這三家三駕馬車分別代表著結(jié)構(gòu)，展示，和交互。在 web1.0的時(shí)代，頁(yè)面的邏輯并不是特別復(fù)雜，對(duì)用戶體驗(yàn)的要求也不是很高，table被大量開發(fā)者用來(lái)做布局元素，橫跨結(jié)構(gòu)和展示兩個(gè)部分，是很“重”的。

但是在如今 web 前端邏輯越來(lái)越復(fù)雜，用戶體驗(yàn)要求越來(lái)越高的情況下，對(duì)這三者的解耦是必須的。此時(shí)再用 table 拿來(lái)做布局就不太合適了，因?yàn)?table 標(biāo)簽的語(yǔ)言根本不是用來(lái)做布局的，而是用來(lái)傳遞數(shù)據(jù)的。而 div+css 是符合解耦這一思想的，div 用來(lái)控制布局，css 用來(lái)控制樣式。好處從小了說(shuō)是整個(gè)頁(yè)面的代碼組織結(jié)構(gòu)更合理，耦合度更低，從大了說(shuō)是更利于前端開發(fā)的深度分工和復(fù)雜合作。

簡(jiǎn)要對(duì)比一下：

1、div+css 相對(duì)于 table 更為靈活，用 table 布局，代碼臃腫。

2、語(yǔ)義性問(wèn)題。從語(yǔ)義上來(lái)說(shuō)，table 應(yīng)該只是表格數(shù)據(jù)的容器，不應(yīng)該是布局的工具。

3、樣式渲染問(wèn)題。table 布局要等內(nèi)容全部加載完畢后才渲染樣式，如果用戶網(wǎng)速不好，這樣用戶體驗(yàn)會(huì)很差。