我們?cè)赩eVb.com一直強(qiáng)調(diào)交流的重要性，只有通過交流才能發(fā)現(xiàn)自己的不足，才能明確的知曉自己到底掌握了多少知識(shí)，哪些地方不足，哪些地方已經(jīng)掌握，今天與大家分享一位VeVb網(wǎng)友的divcss網(wǎng)頁布局心得。div+css是目前互聯(lián)網(wǎng)網(wǎng)頁制作最熱門的方法，但對(duì)于完全手寫代碼，許多網(wǎng)頁設(shè)計(jì)師都望而止步。其實(shí)div+css是很簡(jiǎn)單的一種布局方式，甚至比任何一種編程語言都要簡(jiǎn)單(雖然它不能算是編程語言)。

　　首先你要知道，當(dāng)你開始學(xué)習(xí)div+css的時(shí)候，你要把以前所有用dw畫布局表格的思維方法忘的一干二凈(如果你以前是用table布局的話)，然而這項(xiàng)技術(shù)更適合剛接觸網(wǎng)頁制作的人。

　　然后你要知道，div+css是高成本開發(fā)，速度當(dāng)然是沒有你畫table來的快，但是好處更多，相信如果你能看到這里，你一定對(duì)div+css的好處也有一定的了解了。

　　最后你還得知道，你所用的工具，你可能認(rèn)為dreamweaver很好，沒錯(cuò)，它的確不錯(cuò)，但你要認(rèn)識(shí)到，當(dāng)你熟練使用了這門技術(shù)，你就可以在任何文本編輯器中編寫網(wǎng)頁，甚至在記事本中，而dreamweaver只是充當(dāng)一個(gè)文本編輯器的角色，而你所有的工作基本都在代碼視圖中完成，在這里我推薦adobe最新的dreamweaver cs4。當(dāng)然如果cs5出現(xiàn)了我也會(huì)去試用它。

　　切入正題，其實(shí)div+css正確的說法應(yīng)該是xhtml+css，說成div的原因只是讓它能更明確地和table布局方法區(qū)分開來，并不是說一個(gè)頁面里沒有table，而是在什么地方使用table，你要認(rèn)識(shí)到table是表格，是存放數(shù)據(jù)用的，而不是用來布局的。

　　接下來是布局思維方式，可能大家在接觸div+css的時(shí)候無從下手，我現(xiàn)在向大家推薦最著名的盒子模型，我也是看了這個(gè)模型后一下子就開竅了。

　　你可能會(huì)說，好多英文看不懂，不過我告訴你，很抱歉那三個(gè)英文你必須記住，而且是最重要的三個(gè)，你可以把這么個(gè)盒子看成一個(gè)div，而所有標(biāo)簽都帶有這三個(gè)屬性。

　　正如你所見到的這個(gè)是一個(gè)方塊，而網(wǎng)頁呢，是由這么多大大小小的方塊組成的，可能以下實(shí)例會(huì)更明確的讓你了解這個(gè)盒子。

　　我在這里借用了新浪博客的盒子來說明下，大家可能發(fā)現(xiàn)了，其實(shí)邊框border往往就只有1px的寬度，誰叫它是邊框呢。而外補(bǔ)丁margin呢，它代表了div(盒子)和div(盒子)之間的距離，而內(nèi)補(bǔ)丁padding則是大盒子(div)和里面的盒子(div)的距離(盒子(div)里面可以放盒子(div)哦)。