詳解CSS盒模型算法和應(yīng)用
這里向大家描述一下CSS盒模型的概念和應(yīng)用，主要包括塊級盒的默認(rèn)寬度，無寬度的絕對定位盒子，無寬度浮動盒子等內(nèi)容，相信通過本文的學(xué)習(xí)你對CSS盒模型的概念和使用一定會有深刻的認(rèn)識。
CSS盒模型
網(wǎng)頁設(shè)計(jì)中的每個(gè)元素都是長方形的盒子。盒子的尺寸是怎樣精確計(jì)算的，請看下圖：
如果是Firebug用戶的話(基本和前端有關(guān)的都會用到Firebug吧–糖伴西紅柿)，就會很熟悉下面的圖表了。
這個(gè)圖表很好地展示了作用于頁面上任意盒子的數(shù)值。
注意以上兩個(gè)例子中，margin都是白色的。Margin比較特別，它不會影響盒子本身的大小，但是它會
影響和盒子有關(guān)的其他內(nèi)容，因此margin是盒模型的一個(gè)重要的組成部分。
盒子本身的大小是這樣計(jì)算的：
寬度=自身寬度+左內(nèi)邊距+右內(nèi)邊距+左邊框+右邊框
高度=自身高度+上內(nèi)邊距+下內(nèi)邊距+上邊框+下邊框
值未聲明的情況
如果未聲明padding或者border，那他們或者值為零(使用cssreset時(shí))，或者為瀏覽器的默認(rèn)值(很可能不是零，尤其是那些通常沒有重置的表單元素)#p#
塊級盒的默認(rèn)寬度
如果未聲明寬度，并且CSS盒模型中盒子是靜態(tài)或者相對定位的，寬度會保持100％的寬度，padding和border會向內(nèi)推動，而不是向外擴(kuò)展。
但是，如果明確設(shè)置盒子的寬度為100％，那么padding就會向外延展。
要注意的是，盒子的默認(rèn)寬度并不真的是100％，而是剩下的可能值(應(yīng)該是說，剩余真實(shí)存在的寬度－糖伴西紅柿)。應(yīng)該了解這個(gè)特殊值，因?yàn)楹芏嗲闆r下，它對于設(shè)置/不設(shè)置寬度都是非常有用的。
我遇到的***的麻煩就是textarea(文本框)元素了，它們需要設(shè)為寬度為所需的”cols”屬性，并且不能包含子元素。因此通常需要明確的設(shè)置textarea的寬度為100%，但有padding時(shí)，就會延展textarea的寬度。固定寬度環(huán)境下，通?？梢栽O(shè)置為合適的像素值寬度，但是變寬情況就沒那么幸運(yùn)了。
無寬度的絕對定位盒子
未設(shè)定寬度的絕對定位的CSS盒模型中的盒子的表現(xiàn)有點(diǎn)不一樣。它們的寬度只需要適合它們所包含的內(nèi)容即可。因此，如果盒中只有一個(gè)單詞，盒子就會像那個(gè)詞的表現(xiàn)一樣寬。如果變成兩個(gè)詞，盒子的寬度也會相應(yīng)增加。
這種情況會持續(xù)到盒子的寬度達(dá)到父元素寬度的100%（最近的相對定位的父元素或者瀏覽器窗口），然后就會折行。
對盒子來說，垂直擴(kuò)展以適應(yīng)包含的內(nèi)容是很自然的。值得奇怪的是，不僅僅是不同平臺下的文本表現(xiàn)不同，不同的瀏覽器處理這個(gè)問題時(shí)，也有很多怪癖。
無寬度浮動盒子
同無寬度的絕對定位盒子的表現(xiàn)一樣。CSS盒模型的寬度只需要擴(kuò)展到所包含內(nèi)容的寬度，直到其父元素的寬度（其父元素不必是相對定位的）。由于這些無寬度盒子的脆弱性，我們要學(xué)到的是關(guān)鍵任務(wù)模式的時(shí)候它們是不能依賴的，像總體頁面布局中。如果浮動一列作為側(cè)邊欄使用，并指望那些內(nèi)部元素（如圖片）來負(fù)責(zé)包含它的寬度，你就是在自找麻煩。
內(nèi)聯(lián)元素也是盒子
我們這里一直把重點(diǎn)放在塊級元素的盒子上。很容易就可以把塊級元素想象為盒子，但是內(nèi)聯(lián)元素也是盒子?？梢园阉麄兿胂鬄榉浅ｉL而窄的長方形，它們也可以像其它盒子一樣有margin,paddingheborder
折行使它看起來有些不好理解。如上所示的左margin把盒子推向右邊，但是只在***行有效，因?yàn)槟鞘呛凶拥钠瘘c(diǎn)。padding正常的應(yīng)用在文本的上部或下部，當(dāng)折行時(shí)它會忽略上面行的padding并且以行高(line-height)要求的位置作為起點(diǎn)。透明背景是為了讓效果看起來更清楚。
詳文參考：http://www.csschina.net/a/jc/css_646.html
【編輯推薦】
