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

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

1.2. 盒的背景色

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

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

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

-- margin 簡寫屬性一次性設置四周的外邊距，而其它外邊距屬性只設置它們各側的。這些屬性適用于所有元素，但非替換的行內元素上的垂直margin將不會產生任何效果

2.2. margin-width 值類型，可以取下列值之一：

-- length 指定一個固定寬度-- percentage 百分比根據生成盒的包含塊的width來計算。注意，這一點對于 margin-top 和 margin-bottom 也適用。如果包含塊的寬度取決于該元素，那么產生的布局在CSS 2.1是未定義的--auto--margin屬性允許負值，但可能存在具體實現限制

2.3. margin-top , margin-bottom

 margin-top , margin-bottom Value: margin-width | inheritInitial: 0Applies to: 除display類型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對非table系列都適用）Inherited: noPercentages: 參照包含塊的寬度Media: visualComputed value: 指定的百分比或者絕對長度

這兩個屬性對非替換的行內元素無效

2.4. margin-right , margin-left

 margin-right , margin-left Value: margin-width | inheritInitial: 0Applies to: 除display類型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對非table系列都適用）Inherited: noPercentages: 參照包含塊的寬度Media: visualComputed value: 指定的百分比或者絕對長度

2.5. margin

 margin Value: margin-width {1,4} | inheritInitial: 見單獨的各個屬性Applies to: 除display類型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對非table系列都適用）Inherited: noPercentages: 參照包含塊的寬度Media: visualComputed value: 見單獨的各個屬性

3. 合并外邊距

相鄰的垂直外邊距會合并，除了：

----根元素盒的margin不合并
----如果一個帶有間隙（clearance 譯注：是指clear屬性導致元素位置移動形成的間隙）的元素的上外邊距與下外邊距相鄰，它的外邊距會和緊挨著的兄弟（元素）的相鄰外邊距合并，但合并后不會再和父級塊的下外邊距合并

相信看了本文案例你已經掌握了方法，更多精彩請關注php 其它相關文章！

相關閱讀：

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

css里有哪些長度單位

CSS( Cascading Style Sheets )集合

以上就是html的盒模型詳解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。