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

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

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

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

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

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

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

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

簡要對(duì)比一下：

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

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

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