|
無(wú)寬度的絕對(duì)定位盒子
未設(shè)定寬度的絕對(duì)定位的盒子的表現(xiàn)有點(diǎn)不一樣。它們的寬度只需要適合它們所包含的內(nèi)容即可。因此，如果盒中只有一個(gè)單詞，盒子就會(huì)像那個(gè)詞的表現(xiàn)一樣寬。如果變成兩個(gè)詞，盒子的寬度也會(huì)相應(yīng)增加。這種情況會(huì)持續(xù)到盒子的寬度達(dá)到父元素寬度的 100%（最近的相對(duì)定位的父元素或者瀏覽器窗口），然后就會(huì)折行。
對(duì)盒子來(lái)說(shuō)，垂直擴(kuò)展以適應(yīng)包含的內(nèi)容是很自然的。值得奇怪的是，不僅僅是不同平臺(tái)下的文本表現(xiàn)不同，不同的瀏覽器處理這個(gè)問題時(shí)，也有很多怪癖。
無(wú)寬度浮動(dòng)盒子
同無(wú)寬度的絕對(duì)定位盒子的表現(xiàn)一樣。盒子的寬度只需要擴(kuò)展到所包含內(nèi)容的寬度，直到其父元素的寬度（其父元素不必是相對(duì)定位的）。由于這些無(wú)寬度盒子的脆弱性，我們要學(xué)到的是關(guān)鍵任務(wù)模式的時(shí)候它們是不能依賴的，像總體頁(yè)面布局中。如果浮動(dòng)一列作為側(cè)邊欄使用，并指望那些內(nèi)部元素（如圖片）來(lái)負(fù)責(zé)包含它的寬度，你就是在自找麻煩。
內(nèi)聯(lián)元素也是盒子
我們這里一直把重點(diǎn)放在塊級(jí)元素的盒子上。很容易就可以把塊級(jí)元素想象為盒子，但是內(nèi)聯(lián)元素也是盒子�？梢园阉麄兿胂鬄榉浅ｉL(zhǎng)而窄的長(zhǎng)方形，它們也可以像其它盒子一樣有 margin, padding he border
折行使它看起來(lái)有些不好理解。如上所示的左 margin 把盒子推向右邊，但是只在第一行有效，因?yàn)槟鞘呛凶拥钠瘘c(diǎn)。padding 正常的應(yīng)用在文本的上部或下部，當(dāng)折行時(shí)它會(huì)忽略上面行的 padding 并且以行高(line-height)要求的位置作為起點(diǎn)。透明背景是為了讓效果看起來(lái)更清楚。
親眼目睹一下
想看看組成頁(yè)面的每個(gè)單獨(dú)的“盒子”嗎？試著把這行代碼暫時(shí)放入樣式表：
* {
border: 1px solid red !important;
}
本文鏈接：http://www.95time.cn/tech/web/2009/6769.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) CSS盒模型 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) CSS盒模型 [2]
