你是到CSS盒模型的原理嗎，這里和大家分享一下用CSS盒模型原理設(shè)計(jì)網(wǎng)頁的寬度和高度，當(dāng)我們?cè)O(shè)計(jì)布局一個(gè)網(wǎng)頁的時(shí)候，經(jīng)常遇到最終網(wǎng)頁成型的時(shí)候?qū)挾然蛘吒叨葧?huì)超出我們預(yù)先的設(shè)計(jì)大小，其實(shí)這種現(xiàn)象就是所謂的CSS的盒模型造成的。

用CSS盒模型原理設(shè)計(jì)網(wǎng)頁的寬度和高度

當(dāng)我們?cè)O(shè)計(jì)布局一個(gè)網(wǎng)頁的時(shí)候，經(jīng)常會(huì)碰到這樣的一種情況，那就是最終網(wǎng)頁成型的時(shí)候?qū)挾然蛘吒叨葧?huì)超出我們預(yù)先的設(shè)計(jì)大小，其實(shí)這種現(xiàn)象就是所謂的CSS的盒模型造成的。

#test{margin:10px;padding:10px;width:100px;height:100px;}  
 

如上一段的代碼，很多時(shí)候我們會(huì)把它所占的位置計(jì)算成width:120px，height:120px，因?yàn)樵谡５睦斫庀?，padding是內(nèi)邊距，應(yīng)該是包括在width里面的，而margin是外邊距，所以width＝margin-left+margin-right+width，但是瀏覽器對(duì)于CSS盒模型的解釋卻并非如此，所以最終我們會(huì)發(fā)現(xiàn)布局出來的網(wǎng)頁寬度與高度都會(huì)超出我們預(yù)期的計(jì)算，***造成顯示上的錯(cuò)位。

◆其實(shí)不然，對(duì)于test所占的位置的真正計(jì)算應(yīng)該是width=margin-left+margin-right+padding-left+padding-right+width，也就是寬度真正所占的大小應(yīng)該是內(nèi)邊距+外邊距+寬度本身，也就是說test真正的大小應(yīng)該是140px才對(duì)。高度的計(jì)算與寬度的計(jì)算是一樣的。

◆而如果給test加上邊框的話，這個(gè)寬度與高度的算法還應(yīng)該加上邊框的大小。

#test{margin:10px;padding:10px;border:5px;  
width:100px;height:100px;}  
 

這里的test的寬度就應(yīng)該是外邊框+內(nèi)邊框+邊框+寬度本身，所以test的width是150px。

如下圖所示，width與height真正所占的位置并不是它本身的那一小塊，而應(yīng)該是一直到最外面深藍(lán)色的那個(gè)層為止。

詳文參考：http://www.csschina.net/a/jc/css_825.html

【編輯推薦】

1. CSS盒模型（BoxModel）用法詳解
2. JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式
3. DIV CSS建站對(duì)瀏覽器兼容性和注意事項(xiàng)
4. DIV CSS中float用法探究
5. 解讀DIV CSS網(wǎng)頁布局中CSS無效十個(gè)原因