5.13日音訊,玩轉(zhuǎn)div中盒子模型其實很簡單。說起盒子模型，相信大家都不陌生，這在網(wǎng)站制作中經(jīng)常遇到，但我們在網(wǎng)頁制作中卻會經(jīng)常遇到一些小的問題，網(wǎng)頁變形了、錯位了、沒有按我們的意圖來擺放了，等等，這就是我們對字還有一些知識或功能沒有知識清楚，現(xiàn)在我們就來仔細(xì)認(rèn)識下，幫助大家共同學(xué)習(xí)。

　　說白了，CSS盒子也是裝東西的，比如我們要將文字內(nèi)容、圖片布局網(wǎng)頁中，那就需要像盒子一樣裝著。這個時候我們對其對象設(shè)置css高度(cssheight)、css寬度(csswidth)、css邊框(cssborder)、css邊距(cssmargin)、填充（csspadding）,即可實現(xiàn)像盒子一樣的長方形、正方形平面盒子。

　　通常我們這樣：

　　一組<div></div>、<span></span>等類似這種語法標(biāo)簽組叫1個盒子。因為我們對其設(shè)置了高度(height)、寬度(width)、邊框(border)、邊距(margin)、填充（padding）等屬性后即可呈現(xiàn)出盒子一樣的長方形或正方形。所以我們CSS盒子模型因此而得來。

　　日常使用CSS盒子：

　　我們說將什么內(nèi)容放入一個盒子里，我們就要想到是放入<div></div>里，腦海里就要這個概念。

　　假如我們說設(shè)置一個寬度為100px盒子，我們就要知道如下一個概念：

　　Css樣式代碼：

　　.yangshi{width:100px;}

　　對應(yīng)html代碼：

　　<divclass="yangshi">內(nèi)容</div>

　　這個時候我們可以將<divclass="yangshi">內(nèi)容</div>看作為一個盒子。

　　1、盒子模型的height和width屬性，指的是content區(qū)的高和寬，而不是整個盒子的。2、div為塊級元素，span為行級元素。3、行內(nèi)元素之間的水平距離為左元素的右margin和右元素的左margin之和。4、塊元素之間的豎直距離為上元素的下margin和下元素的上margin的最大值。5、設(shè)置了float屬性的塊級元素脫離標(biāo)準(zhǔn)流，其下方的塊級元素會占領(lǐng)其原來的位置，只是下方塊級元素中的文字會被該塊擠開，形成一個文字環(huán)繞該塊效果。如果想清除浮動的影響，設(shè)置clear屬性，該屬性有3個值：left、both、right。6、如果一個父類盒子中所有子類盒子均設(shè)置為浮動（float），該父盒子的高度幾乎為零，如果想讓父盒子的告訴何內(nèi)部子盒子的高度自適應(yīng)，在父盒子內(nèi)部的下方添加一個div，設(shè)置其CSS屬性為{clear:both;margin:0;padding:0}7、盒子的定位，position屬性的取值有四個。static:盒子按標(biāo)準(zhǔn)流進行布局。relative:相對定位，盒子相對原來標(biāo)準(zhǔn)位置偏移指定距離，相對盒子仍在標(biāo)準(zhǔn)流中，其后的盒子仍以標(biāo)準(zhǔn)方式對待它。

　　怎么樣才算是選擇了“標(biāo)準(zhǔn)W3C盒子模型”呢？很簡單，就是在網(wǎng)頁制作的頂部加上DOCTYPE聲明。如果不加DOCTYPE聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即IE瀏覽器會采用IE盒子模型去解釋你的盒子，而FF會采用標(biāo)準(zhǔn)W3C盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。反之，如果加上了DOCTYPE聲明，那么所有瀏覽器都會采用標(biāo)準(zhǔn)W3C盒子模型去解釋你的盒子，網(wǎng)頁就能在各個瀏覽器中顯示一致了。

　　其實說起來簡單，但做起來就沒有這么容易了，只有我們把它們這間的各種關(guān)系搞清楚了，我們才會達到自己想要的效果，怎么樣才能搞明白呢，就要我們不矢余力地多多練習(xí)，在練習(xí)中發(fā)現(xiàn)要點，在實踐中才能創(chuàng)造一個良好合理的網(wǎng)頁效果。