XHTML CSS基礎知識-Web標準(div+css)教程

　　我們可以把它想像成現實中上方開口的盒子，然后從正上往下俯視，邊框相當于盒子的厚度，內容相對于盒子中所裝物體的空間，而填充呢，相當于為防震而在盒子內填充的泡沫，邊界呢相當于在這個盒子周圍要留出一定的空間，方便取出。是不是這樣就很容易理解盒模型了。

　　所以整個盒模型在頁面中所占的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成，而css樣式中weight所定義的寬度僅僅是內容部分的寬度，這是許多朋友容易搞混的地方

　　這里的邊界我們也稱之為：外邊距、外補??；填充也叫：內邊距、內補丁。

　　如果現在您對CSS盒模型理解還不夠透徹，繼續往下看，后來的章節會都會應用到盒模型實例。

　　二、如何開始學習web標準？

　　1）有HTML和CSS基礎

　　學習本系列教程前，要求您有一定的html和css基礎，制作過網頁，會用表格進行網頁布局，這樣學習起來才會很輕松。如果您對這些還不懂，建議先學習這些知識，然后再來學習本教程。

　　2）轉變觀念

　　在以前我們制作網站時，總是習慣于先考慮外觀、顏色、字體及布局等所有表現在頁面上的內容。但外觀并不是最重要的，相反最終用戶在訪問網頁時的體驗才是優先要考慮的。一個由div＋css布局且結構良好的頁面可以通過css定義成任何外觀，在任何網絡設備上（包括手機、PDA和計算機）上以任何外觀表現出來，而且用div＋css布局構建的網頁以夠簡化代碼，加快顯示速度。

　　所以要想學好div＋css，首先要轉變觀念，需要拋棄傳統的表格(Table)布局方式，采用層(DIV)布局，并且使用層疊樣式表(CSS)來實現頁面的外觀。給網站瀏覽者更好的體驗。

　　3）多動手、多動腦

　　說到這點，有點小兒科了，就像我們上小學時老師常常教我們的那樣。為什么我在這里也做為一點列出來呢，我是通過評論發現，有些同學提的問題太沒水平了，稍微動下腦筋就明白了，或者自己動手一試就知道了，但他就懶得試。舉個簡單的例子，拿瀏覽器兼容來說吧，你寫個樣式之后，在IE和火狐分別打開看一下不就明白了，但就是不去做。還有一個同學留言要我把一個實例中的圖片打包發給他，我一看代碼，就用到一張圖片，無語了，有你留言的這個時間，自己也早把圖片下載下來了。所以在這里告誡大家，一定要多動手、多動腦，不要怕麻煩。另外在學習完一節教程后，一定要自己做一遍實例，這樣能更快掌握。

　　文章出處：標準之路 編輯：楊雨晨思