css 盒模型

1、CSSCSS盒模型盒模型網(wǎng)頁設(shè)計(jì)中的每個(gè)元素都是長(zhǎng)方形的盒子。網(wǎng)頁設(shè)計(jì)中的每個(gè)元素都是長(zhǎng)方形的盒子。盒子的尺寸是怎樣精確計(jì)算的，請(qǐng)看下圖：如果是Firebug用戶的話(基本和前端有關(guān)的都會(huì)用到Firebug吧–糖伴西紅柿)，就會(huì)很熟悉下面的圖表了。這個(gè)圖表很好地展示了作用于頁面上任意盒子的數(shù)值。注意以上兩個(gè)例子中，margin都是白色的。Margin比較特別，它不會(huì)影響盒子本身的大小，但是它會(huì)影響和盒子有關(guān)的其他內(nèi)容，因此margin是

2、盒模型的一個(gè)重要的組成部分。盒子本身的大小是這樣計(jì)算的：WidthWidthwidthpaddingleftpaddingrightbderleft要注意的是，盒子的默認(rèn)寬度并不真的是100％，而是剩下的可能值(應(yīng)該是說，剩余真實(shí)存在的寬度－糖伴西紅柿)。應(yīng)該了解這個(gè)特殊值，因?yàn)楹芏嗲闆r下，它對(duì)于設(shè)置不設(shè)置寬度都是非常有用的。我遇到的最大的麻煩就是textarea(文本框)元素了，它們需要設(shè)為寬度為所需的”cols”屬性，并且不能包含子

3、元素。因此通常需要明確的設(shè)置textarea的寬度為100%，但有padding時(shí)，就會(huì)延展textarea的寬度。固定寬度環(huán)境下，通?？梢栽O(shè)置為合適的像素值寬度，但是變寬情況就沒那么幸運(yùn)了。無寬度的絕對(duì)定位盒子無寬度的絕對(duì)定位盒子未設(shè)定寬度的絕對(duì)定位的盒子的表現(xiàn)有點(diǎn)不一樣。它們的寬度只需要適合它們所包含的內(nèi)容即可。因此，如果盒中只有一個(gè)單詞，盒子就會(huì)像那個(gè)詞的表現(xiàn)一樣寬。如果變成兩個(gè)詞，盒子的寬度也會(huì)相應(yīng)增加。這種情況會(huì)持續(xù)到盒子的寬