對div盒子模型使用心得總結
發(fā)布時間：2013-08-30 16:39:47 作者：佚名 
我要評論
我要評論相信每一個從事web開發(fā)的人對盒子模型都有一個特殊的理解吧，本文也有一個理解并附有示例代碼，喜歡的朋友可以參考下
盒子模型的計算
外邊距(margin)+邊框(border)+內(nèi)邊距(padding)+內(nèi)容(content)
在css中的width和height只是對內(nèi)容區(qū)域的高和寬設定.不是對整個和模型的高和寬設定.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
*{margin:0; padding:0;}
dl { background:red;border:10px solid #000; width:100px; height:100px;}
dt { background:yellow;}
dd { background:green;}
</style>
</head>
<body>
<dl>
<dt>test of dt</dt>
<dd>test of dd</dd>
</dl>
</body>
</html>
設置外邊距和內(nèi)邊距都不會影響內(nèi)容區(qū)域的高度和寬度,僅僅會改變次盒子模型的區(qū)域的高寬.
在盒模型嵌套的情況下,里層盒模型會影響到外層的盒模型.
外邊距(margin)+邊框(border)+內(nèi)邊距(padding)+內(nèi)容(content)
在css中的width和height只是對內(nèi)容區(qū)域的高和寬設定.不是對整個和模型的高和寬設定.
復制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
*{margin:0; padding:0;}
dl { background:red;border:10px solid #000; width:100px; height:100px;}
dt { background:yellow;}
dd { background:green;}
</style>
</head>
<body>
<dl>
<dt>test of dt</dt>
<dd>test of dd</dd>
</dl>
</body>
</html>
設置外邊距和內(nèi)邊距都不會影響內(nèi)容區(qū)域的高度和寬度,僅僅會改變次盒子模型的區(qū)域的高寬.
在盒模型嵌套的情況下,里層盒模型會影響到外層的盒模型.
相關文章
網(wǎng)頁里的兩種盒子模型(W3C盒子模型、IE盒子模型)
網(wǎng)頁里有兩種盒子模型標準一是W3C盒子模型；二是IE盒子模型（IE瀏覽器默認的模型）下面就用公式來區(qū)分這兩種不同的盒子模型2013-09-08- 本章將介紹CSS3中各種盒的知識點；主要包含以下內(nèi)容：CSS3中各種各樣盒的類型概念、瀏覽器支持情況2013-04-24
- 本章將介紹CSS3中各種盒的知識點；主要包含以下內(nèi)容：CSS3中各種各樣盒的類型概念、瀏覽器支持情況2013-04-24
- 前兩天看的《IE6 很邪惡，但我愛它的盒子模型》，我說盒子模型如何如何，面試官告訴我IE5的盒子模型有問題，不是IE6。2010-08-27
- 盒子模型，是XHTML+CSS布局頁面中的核心！要想學會用CSS布局頁面，就首先要理解盒子模型！2010-01-07
css的核心內(nèi)容 標準流、盒子模型、浮動、定位等分析
css的核心內(nèi)容：標準流、盒子模型、浮動、定位（可以說不理解這些概念絕做不出合適的網(wǎng)頁）2009-12-21- 剛剛看了css教程覺得很形象就貼出來了。想學習的朋友可以參考下。2009-10-15
- 網(wǎng)頁制作Webjx文章簡介：盒子模型是CSS中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 IE 盒子模型和標準 W3C 盒子模型。2009-04-02
HTML和CSS的關鍵:盒子模型(Box model)-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
原文：http://jorux.com/archives/property-4-if-you-love-css/ 本文作為屬性篇的最后一篇文章, 將講述HTML和CSS的關鍵—盒子模型(Box model). 理解Box model的關2008-10-17