小編給大家分享一下html盒模型的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
員工經(jīng)過長期磨合與沉淀,具備了協(xié)作精神,得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念,因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計、做網(wǎng)站、微信公眾號開發(fā)、電商網(wǎng)站開發(fā),微信平臺小程序開發(fā),軟件定制設(shè)計等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
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. <margin-width>值類型,可以取下列值之一:
--<length> 指定一個固定寬度 --<percentage> 百分比根據(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: <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: 指定的百分比或者絕對長度
這兩個屬性對非替換的行內(nèi)元素無效
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屬性導致元素位置移動形成的間隙)的元素的上外邊距與下外邊距相鄰,它的外邊距會和緊挨著的兄弟(元素)的相鄰外邊距合并,但合并后不會再和父級塊的下外邊距合并
以上是“html盒模型的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享名稱:html盒模型的示例分析
本文鏈接:http://bm7419.com/article16/jjchgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、網(wǎng)站收錄、手機網(wǎng)站建設(shè)、Google、企業(yè)建站、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)