今天小編給大家分享一下html盒模型怎么定義使用的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),晉城企業(yè)網(wǎng)站建設(shè),晉城品牌網(wǎng)站建設(shè),網(wǎng)站定制,晉城網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,晉城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

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

1.2. 盒的背景色

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

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

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

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

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

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

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

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

這兩個屬性對非替換的行內(nèi)元素無效

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

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

2.5. 'margin'

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

3. 合并外邊距

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

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

以上就是“html盒模型怎么定義使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。