站長(zhǎng)資訊網(wǎng)
css的盒模型有2種，分別為：1、W3c標(biāo)準(zhǔn)的盒子模型（標(biāo)準(zhǔn)盒模型），width和height指的是內(nèi)容區(qū)域的寬度和高度；2、IE標(biāo)準(zhǔn)的盒子模型（怪異盒模型），width和height指的是內(nèi)容區(qū)域、邊框、內(nèi)邊距總的寬度和高度。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
盒子模型
CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。 盒子模型（Box Modle）可以用來(lái)對(duì)元素進(jìn)行布局，包括內(nèi)邊距，邊框，外邊距，和實(shí)際內(nèi)容這幾個(gè)部分。
盒子中的區(qū)域
一個(gè)盒子中主要的屬性就5個(gè)：width、height、padding、border、margin。如下：
- width和height：內(nèi)容的寬度、高度（不是盒子的寬度、高度）。
- padding：內(nèi)邊距。
- border：邊框。
- margin：外邊距。
盒子模型的示意圖：
代碼演示：
上面這個(gè)盒子，width:200px; height:200px; 但是真實(shí)占有的寬高是302*302。 這是因?yàn)檫€要加上padding、border。
注意：寬度和真實(shí)占有寬度，不是一個(gè)概念！來(lái)看下面這例子。
標(biāo)準(zhǔn)盒模型和IE盒模型
盒子模型分為兩種：
-
第一種是W3c標(biāo)準(zhǔn)的盒子模型（標(biāo)準(zhǔn)盒模型）
-
第二種IE標(biāo)準(zhǔn)的盒子模型（怪異盒模型）
我們目前所學(xué)習(xí)的知識(shí)中，以標(biāo)準(zhǔn)盒子模型為準(zhǔn)。
標(biāo)準(zhǔn)盒子模型：
IE盒子模型：
上圖顯示：
在 CSS 盒子模型 (Box Model) 規(guī)定了元素處理元素的幾種方式：
- width和height：內(nèi)容的寬度、高度（不是盒子的寬度、高度）。
- padding：內(nèi)邊距。
- border：邊框。
- margin：外邊距。
CSS盒模型和IE盒模型的區(qū)別：
-
在 標(biāo)準(zhǔn)盒子模型中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。
-
IE盒子模型中，width 和 height 指的是內(nèi)容區(qū)域+border+padding的寬度和高度。
注：Android中也有margin和padding的概念，意思是差不多的，如果你會(huì)一點(diǎn)Android，應(yīng)該比較好理解吧。區(qū)別在于，Android中沒(méi)有border這個(gè)東西，而且在Android中，margin并不是控件的一部分，我覺(jué)得這樣做更合理一些，呵呵。
<body>標(biāo)簽也有margin
<body>標(biāo)簽有必要強(qiáng)調(diào)一下。很多人以為<body>標(biāo)簽占據(jù)的是整個(gè)頁(yè)面的全部區(qū)域，其實(shí)是錯(cuò)誤的，正確的理解是這樣的：整個(gè)網(wǎng)頁(yè)最大的盒子是<document>，即瀏覽器。而<body>是<document>的兒子。瀏覽器給<body>默認(rèn)的margin大小是8個(gè)像素，此時(shí)<body>占據(jù)了整個(gè)頁(yè)面的一大部分區(qū)域，而不是全部區(qū)域。來(lái)看一段代碼。
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid red; padding: 20px; margin: 30px; } </style> </head> <body> <div>有生之年</div> <div>狹路相逢</div> </body> </html>
上面的代碼中，我們對(duì)div標(biāo)簽設(shè)置了邊距等信息。打開(kāi)google瀏覽器，按住F12，顯示效果如下：
認(rèn)識(shí)width、height
一定要知道，在前端開(kāi)發(fā)工程師眼中，世界中的一切都是不同的。
比如說(shuō)，丈量稿紙，前端開(kāi)發(fā)工程師只會(huì)丈量?jī)?nèi)容寬度：
下面這兩個(gè)盒子，真實(shí)占有寬高，都是302*302：
盒子1：
.box1{ width: 100px; height: 100px; padding: 100px; border: 1px solid red; }
盒子2：
.box2{ width: 250px; height: 250px; padding: 25px; border: 1px solid red; }
真實(shí)占有寬度 = 左border + 左padding + width + 右padding + 右border
上面這兩個(gè)盒子的盒模型圖如下：
如果想保持一個(gè)盒子的真實(shí)占有寬度不變，那么加width的時(shí)候就要減padding。加padding的時(shí)候就要減width。因?yàn)楹凶幼兣至耸菫?zāi)難性的，這會(huì)把別的盒子擠下去。
認(rèn)識(shí)padding
padding區(qū)域也有顏色
padding就是內(nèi)邊距。padding的區(qū)域有背景顏色，css2.1前提下，并且背景顏色一定和內(nèi)容區(qū)域的相同。也就是說(shuō)，background-color將填充所有border以內(nèi)的區(qū)域。
效果如下：
padding有四個(gè)方向
padding是4個(gè)方向的，所以我們能夠分別描述4個(gè)方向的padding。
方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開(kāi)。
小屬性的寫法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
綜合屬性的寫法：(上、右、下、左)（順時(shí)針?lè)较颍每崭窀糸_(kāi)。margin的道理也是一樣的）
padding:30px 20px 40px 100px;
如果寫了四個(gè)值，則順序?yàn)椋荷?、右、下、左?/p>
如果只寫了三個(gè)值，則順序?yàn)椋荷稀⒂?、下??和右一樣。
如果只寫了兩個(gè)值，比如說(shuō)：
padding: 30px 40px;
則順序等價(jià)于：30px 40px 30px 40px;
要懂得，用小屬性層疊大屬性。比如：
padding: 20px; padding-left: 30px;
上面的padding對(duì)應(yīng)盒子模型為：
下面的寫法：
padding-left: 30px; padding: 20px;
第一行的小屬性無(wú)效，因?yàn)楸坏诙械拇髮傩詫盈B掉了。
（學(xué)習(xí)視頻分享：css視頻教程）
