建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下html盒模型的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
員工經(jīng)過(guò)長(zhǎng)期磨合與沉淀，具備了協(xié)作精神，得以通過(guò)團(tuán)隊(duì)的力量開(kāi)發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、電商網(wǎng)站開(kāi)發(fā)，微信平臺(tái)小程序開(kāi)發(fā)，軟件定制設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
1.1. 盒的內(nèi)容區(qū)的尺寸— content width和content height —取決于幾個(gè)因素：
--生成該盒的元素是否設(shè)置了'width'或'height'屬性。
--該盒是否包含文本以及其它盒。
--該盒是不是表格等等。
1.2. 盒的背景色
--內(nèi)邊距和邊框區(qū)域的背景樣式由生成（該盒的）元素的'background'屬性來(lái)指定。外邊距背景總是透明的
2. 外邊距屬性： 'margin-top'，'margin-right'，'margin-bottom'，'margin-left'和'margin'
2.1. 外邊距屬性指定了盒的外邊距區(qū)的寬度
--'margin'簡(jiǎn)寫(xiě)屬性一次性設(shè)置四周的外邊距，而其它外邊距屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換的行內(nèi)元素上的垂直margin將不會(huì)產(chǎn)生任何效果
2.2.
--指定一個(gè)固定寬度 -- 百分比根據(jù)生成盒的包含塊的width來(lái)計(jì)算。注意，這一點(diǎn)對(duì)于'margin-top'和'margin-bottom'也適用。如果包含塊的寬度取決于該元素，那么產(chǎn)生的布局在CSS 2.1是未定義的 --auto --margin屬性允許負(fù)值，但可能存在具體實(shí)現(xiàn)限制
2.3. 'margin-top', 'margin-bottom'
'margin-top', 'margin-bottom' Value:| inherit Initial: 0 Applies to: 除display類(lèi)型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說(shuō)，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對(duì)非table系列都適用） Inherited: no Percentages: 參照包含塊的寬度 Media: visual Computed value: 指定的百分比或者絕對(duì)長(zhǎng)度
這兩個(gè)屬性對(duì)非替換的行內(nèi)元素?zé)o效
2.4. 'margin-right', 'margin-left'
'margin-right', 'margin-left' Value:| inherit Initial: 0 Applies to: 除display類(lèi)型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說(shuō)，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對(duì)非table系列都適用） Inherited: no Percentages: 參照包含塊的寬度 Media: visual Computed value: 指定的百分比或者絕對(duì)長(zhǎng)度
2.5. 'margin'
'margin' Value:{1,4} | inherit Initial: 見(jiàn)單獨(dú)的各個(gè)屬性 Applies to: 除display類(lèi)型為table系列中除了table-caption，table和inline-table以外的所有元素（譯注：也就是說(shuō)，table系列display值中，margin-只適用于table-caption, table, inline-table，其余的都不適用，但margin-對(duì)非table系列都適用） Inherited: no Percentages: 參照包含塊的寬度 Media: visual Computed value: 見(jiàn)單獨(dú)的各個(gè)屬性
3. 合并外邊距
相鄰的垂直外邊距會(huì)合并，除了：
----根元素盒的margin不合并
----如果一個(gè)帶有間隙（clearance 譯注：是指clear屬性導(dǎo)致元素位置移動(dòng)形成的間隙）的元素的上外邊距與下外邊距相鄰，它的外邊距會(huì)和緊挨著的兄弟（元素）的相鄰?fù)膺吘嗪喜ⅲ喜⒑蟛粫?huì)再和父級(jí)塊的下外邊距合并
以上是“html盒模型的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站標(biāo)題：html盒模型的示例分析
網(wǎng)頁(yè)URL：http://www.ef60e0e.cn/article/jjchgg.html
