html的盒模型是什么

html的盒模型是什么，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

　　1.1.盒的內容區的尺寸contentwidth和contentheight取決于幾個因素：

　　--生成該盒的元素是否設置了'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來計算。注意，這一點對于'margin-top'和'margin-bottom'也適用。如果包含塊的寬度取決于該元素，那么產生的布局在CSS2.1是未定義的

　　--auto

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

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

　　'margin-top','margin-bottom'

　　Value:<margin-width>|inherit

　　Initial:0

　　Appliesto:除display類型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說，table系列display值中，margin-只適用于table-caption,table,inline-table，其余的都不適用，但margin-對非table系列都適用）

　　Inherited:no

　　Percentages:參照包含塊的寬度

　　Media:visual

　　Computedvalue:指定的百分比或者絕對長度

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

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

　　'margin-right','margin-left'

　　Value:<margin-width>|inherit

　　Initial:0

　　Appliesto:除display類型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說，table系列display值中，margin-只適用于table-caption,table,inline-table，其余的都不適用，但margin-對非table系列都適用）

　　Inherited:no

　　Percentages:參照包含塊的寬度

　　Media:visual

　　Computedvalue:指定的百分比或者絕對長度

　　2.5.'margin'

　　'margin'

　　Value:<margin-width>{1,4}|inherit

　　Initial:見單獨的各個屬性

　　Appliesto:除display類型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說，table系列display值中，margin-只適用于table-caption,table,inline-table，其余的都不適用，但margin-對非table系列都適用）

　　Inherited:no

　　Percentages:參照包含塊的寬度

　　Media:visual

　　Computedvalue:見單獨的各個屬性

　　3.合并外邊距

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

　　----根元素盒的margin不合并

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

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。