|
整理自：The CSS Box Model
中文：CSS 盒模型
CSS 盒模型
網(wǎng)頁設(shè)計(jì)中的每個(gè)元素都是長方形的盒子。盒子的尺寸是怎樣精確計(jì)算的，請(qǐng)看下圖：
如果是 Firebug 用戶的話(基本和前端有關(guān)的都會(huì)用到 Firebug 吧 – 糖伴西紅柿)，就會(huì)很熟悉下面的圖表了。
這個(gè)圖表很好地展示了作用于頁面上任意盒子的數(shù)值。
注意以上兩個(gè)例子中，margin 都是白色的。Margin 比較特別，它不會(huì)影響盒子本身的大小，但是它會(huì)影響和盒子有關(guān)的其他內(nèi)容，因此 margin 是盒模型的一個(gè)重要的組成部分。
盒子本身的大小是這樣計(jì)算的：
Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom
值未聲明的情況
如果未聲明 padding 或者 border，那他們或者值為零(使用 css reset 時(shí))，或者為瀏覽器的默認(rèn)值(很可能不是零，尤其是那些通常沒有重置的表單元素)
塊級(jí)盒的默認(rèn)寬度
如果未聲明寬度，并且盒子是靜態(tài)或者相對(duì)定位的，寬度會(huì)保持 100％的 寬度，padding 和 border 會(huì)向內(nèi)推動(dòng)，而不是向外擴(kuò)展。
但是，如果明確設(shè)置盒子的寬度為 100％，那么 padding 就會(huì)向外延展。
The lesson here being that the default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
要注意的是，盒子的默認(rèn)寬度并不真的是 100％，而是剩下的可能值(應(yīng)該是說，剩余真實(shí)存在的寬度 － 糖伴西紅柿)。應(yīng)該了解這個(gè)特殊值，因?yàn)楹芏嗲闆r下，它對(duì)于設(shè)置/不設(shè)置寬度都是非常有用的。
我遇到的最大的麻煩就是 textarea(文本框) 元素了，它們需要設(shè)為寬度為所需的”cols”屬性，并且不能包含子元素。因此通常需要明確的設(shè)置 textarea 的寬度為 100%，但有 padding 時(shí)，就會(huì)延展 textarea 的寬度。固定寬度環(huán)境下，通�？梢栽O(shè)置為合適的像素值寬度，但是變寬情況就沒那么幸運(yùn)了。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 下一頁 CSS盒模型 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 CSS盒模型 [1]
第 2 頁 
