html的盒模型詳解

這次帶給大家html的盒子模型詳解，使用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. < ;margin-width>值類型，可以取下其中一個列值：

--<length>
指定一个固定宽度
--<percentage>
百分比根据生成盒的包含块的width来计算。注意，这一点对于&#39;margin-top&#39;和&#39;margin-bottom&#39;也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS 2.1是未定义的
--auto
--margin属性允许负值，但可能存在具体实现限制

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

'margin-top', 'margin-bottom'
Value:      <margin-width> | 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:      <margin-width> | 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:      <margin-width>{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屬性導致元素位置移動形成的間隙）的元素的上外邊距與下外邊距相鄰，它的外邊距會和緊挨著的兄弟（元素）的相鄰外邊距合併，但合併之後不會再和父級塊的下外邊距合併

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

相關閱讀：

sublime怎麼快速的建立html頭部程式碼

css裡有哪些長度單位

CSS( Cascading Style Sheets )集合

以上是html的盒模型詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！