html的盒模型詳細(xì)說(shuō)明

1.1. 盒的內(nèi)容區(qū)的尺寸— content width和content height —取決于幾個(gè)因素：

--生成該盒的元素是否設(shè)置了'width'或'height'屬性。
--該盒是否包含文本以及其它盒。
--該盒是不是表格等等。

1.2. 盒的背景色

--內(nèi)邊距和邊框區(qū)域的背景樣式由生成（該盒的）元素的'background'屬性來(lái)指定。外邊距背景總是透明的

2. 外邊距屬性： 'margin-top'，'margin-right'，'margin-bottom'，'margin-left'和'margin'

2.1. 外邊距屬性指定了盒的外邊距區(qū)的寬度

--'margin'簡(jiǎn)寫(xiě)屬性一次性設(shè)置四周的外邊距，而其它外邊距屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換的行內(nèi)元素上的垂直margin將不會(huì)產(chǎn)生任何效果

2.2. <margin-width>值類(lèi)型，可以取下列值之一：

--<length>
指定一個(gè)固定寬度
--<percentage>
百分比根據(jù)生成盒的包含塊的width來(lái)計(jì)算。注意，這一點(diǎn)對(duì)于'margin-top'和'margin-bottom'也適用。如果包含塊的寬度取決于該元素，那么產(chǎn)生的布局在CSS 2.1是未定義的
--auto
--margin屬性允許負(fù)值，但可能存在具體實(shí)現(xiàn)限制

2.3. 'margin-top', 'margin-bottom'

'margin-top', 'margin-bottom'
Value:      <margin-width>   inherit
Initial:    0
Applies to: 除display類(lèi)型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說(shuō)，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對(duì)非table系列都適用）
Inherited:      no
Percentages:    參照包含塊的寬度
Media:      visual
Computed value:     指定的百分比或者絕對(duì)長(zhǎng)度

這兩個(gè)屬性對(duì)非替換的行內(nèi)元素?zé)o效

2.4. 'margin-right', 'margin-left'

'margin-right', 'margin-left'
Value:      <margin-width>   inherit
Initial:    0
Applies to:     除display類(lèi)型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說(shuō)，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對(duì)非table系列都適用）
Inherited:      no
Percentages:    參照包含塊的寬度
Media:      visual
Computed value:     指定的百分比或者絕對(duì)長(zhǎng)度

2.5. 'margin'

'margin'
Value:      <margin-width>{1,4}   inherit
Initial:    見(jiàn)單獨(dú)的各個(gè)屬性
Applies to:     除display類(lèi)型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說(shuō)，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對(duì)非table系列都適用）
Inherited:      no
Percentages:    參照包含塊的寬度
Media:      visual
Computed value:     見(jiàn)單獨(dú)的各個(gè)屬性

3. 合并外邊距

相鄰的垂直外邊距會(huì)合并，除了：

----根元素盒的margin不合并
----如果一個(gè)帶有間隙（clearance 譯注：是指clear屬性導(dǎo)致元素位置移動(dòng)形成的間隙）的元素的上外邊距與下外邊距相鄰，它的外邊距會(huì)和緊挨著的兄弟（元素）的相鄰?fù)膺吘嗪喜ⅲ�但合并后不�?huì)再和父級(jí)塊的下外邊距合并

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

sublime怎樣快速的創(chuàng)建html頭部代碼

css里有哪些長(zhǎng)度單位

CSS( Cascading Style Sheets )集合

以上就是html的盒模型詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！