徹底弄懂CSS盒子模式

日期：2013-12-16 來源：攀枝花惠康網絡公司

理解CSS盒子模子

這些屬性我們可以把它轉移到我們日常糊口中的盒子（箱子）上來理解，日常糊口中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容就是盒子里裝的工具；而填充就是怕盒子里裝的工具（珍貴的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子自己了；至于鴻故ё袞聲名盒子擺放的時辰的不能全數堆在一路，要留必然空位連結通風，同時也為了便利掏出嘛。在網頁設計上，內容常指文字、圖片等元素，可是也可所以小盒子（DIV嵌套），與現實糊口中盒子分歧的是，現實糊口中的工具一般不能年夜于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，瑯縵沔的工具年夜過盒子自己最多把它撐年夜，但它不會損壞的。填充只有寬度屬性，可以理解為糊口中盒子里的抗震輔料厚度，而邊框有巨細和顏色之分，我們又可以理解為糊口中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，鴻溝就是該盒子與其它工具要保留多年夜距離。在現實糊口中，假設我們在一個廣場上，把分歧巨細和顏色的盒子，以必然的間隙和挨次擺放好，最后年夜廣場上空往下看，看到的圖形和結構就近似我們要做的網頁版面設計了，如下圖。

}

此刻對CSS盒子模式理解若干好多了，如不美觀還不夠透辟，繼續往下看，我會在后面舉例，并延用盒子的概念來詮釋它。

height: 50px;

改變我們的思緒

傳統的前臺網頁設計是這樣進行的：按照要求，先考慮好主色調，要用什么類型的圖片，用什么字體、顏色等等，然后再用Photoshop這類軟件自由的畫出來，最后再切成小圖，再不自由的經由過程設計HTML生成頁面，改用CSS排版后，我們要改蹦這個思惟，此時我們首要考慮的是頁面內容的語義和結構，因為一個強CSS節制的網頁，等做好網頁后，你還可以輕松的調你想要的網頁氣概，況且CSS排版的此吐矣閩目的是讓代碼易讀，區塊分明，強化代碼重用，所以結構很主要。如不美觀你想說我的網頁設計的很復雜，到后來能不能實現那樣的效不美觀？我要告訴你的是，如不美觀用CSS實現不了的效不美觀，一般用表格也是很難實現的，因為CSS的節制能力其實是太強年夜了，順便說一點的是用CSS排版有一個很適用的益處是，如不美觀你是接單做網站的，如不美觀你用了CSS排版網頁，做到后來客戶有什么過錯勁，出格是色調的話，那么改起來就相當輕易，甚至你還可以定制幾種氣概的CSS文件供客戶選擇，又或者寫一個軌范實現動態挪用，讓網站具有動態改變氣概的功能。

margin: 0px auto;

在真正起頭結構實踐之前，再來熟悉一件事――結構和默示相分手，這也用CSS結構的特色地址，結構與默示分手后，代碼才精練，更新才便利，這不恰是我們進修CSS的目的地址嗎？舉個例來說P是結構化標簽，有P標簽的處所暗示這是一個段落區塊，margin是默示屬性，我要讓一個段落右縮進2字高，有些人會想到加空格，然后不竭地加空格，但此刻可以給P標簽指定一個CSS樣式：P {text-indent: 2em;}，這樣結不美觀body內容部門就如下，這沒有外加任何默示節制的標簽：

<p>加進海角社區有一段時刻了，但一向沒有時刻寫點工具，今天寫了一篇有關CSS結構的文章，并力爭經由過程一種通俗的說話來聲名常識點，還配以實例和圖片，相信對初學CSS結構的人會帶來必然的輔佐。</p>

#content p {

如不美觀還要對這個段落加上字體、字號、布景、行距等潤色，直接把對應的CSS加進P樣式里就行了，不用像這樣來寫了：

再直接列一段代碼加深理解結構和默示相分手：

用CSS排版

用CSS排版減小網頁文件體積

像膳縵沔我做的阿誰版面，一共分為四個區塊，每個區塊的框架是一樣的，這個框架就是用CSS寫出來的，樣式寫一次，就可以被無數次挪用了(用class挪用，而不是ID)，只要改變其中的文字內容就可以生成氣概統一的眾多板塊了，它的樣式和結構代碼是（請不要直接復制生成網頁，把下面代碼分袂粘貼到網頁中它們應在的位置）：

第一種體例是結構默示相分手，內容部門代碼簡單吧，如不美觀還有更多的圖片列表的話，那么第一種CSS結構體例就更有優勢，我打個例如你好理解：我在BODY向你介紹一小我，我只對你說他是一小我，至于他是一個什么樣的人，有多高，是男是女，你去CSS那兒那里查下就知道。這樣我在BODY的工作酒撇

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。