html盒模型的示例分析

發布時間：2021-06-04 12:04:12

來源：億速云

閱讀：61

作者：小新

小編給大家分享一下html盒模型的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

--生成該盒的元素是否設置了'width'或'height'屬性。

--該盒是否包含文本以及其它盒。

--該盒是不是表格等等。

1.2. 盒的背景色

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

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

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

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

指定一個固定寬度

--

百分比根據生成盒的包含塊的width來計算。注意，這一點對于'margin-top'和'margin-bottom'也適用。如果包含塊的寬度取決于該元素，那么產生的布局在CSS?2.1是未定義的

--auto

--margin屬性允許負值，但可能存在具體實現限制

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:?????指定的百分比或者絕對長度

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

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盒模型的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！

總結

以上是生活随笔為你收集整理的html盒子模型的实例,html盒模型的示例分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。