資源描述：
《基于css盒模型中的margin屬性解析》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。
1、基于CSS盒模型中的margin屬性解析摘要：因特網(wǎng)的迅速發(fā)展使得HTML排版界面效果的局限性日益明顯。DIV+CSS解決了網(wǎng)頁界面布局的難題，成為當(dāng)前網(wǎng)頁布局方式中的主流技術(shù)。而CSS盒模型更是這一技術(shù)中的重要概念，在CSS盒模型的屬性中，margin屬性尤為重要，它幾乎可以設(shè)置在任何元素上，在使用的時候也容易出現(xiàn)一些問題，本文將通過實例對margin屬性進行詳細解析。中國8/vie 關(guān)鍵詞：CSS；盒模型；margin 中圖分類號：TP37文獻標(biāo)識碼：A：1009-3044（2016）36-0074-02 現(xiàn)在，CSS已經(jīng)發(fā)展得非常成
2、功了，無論是在瀏覽器還是應(yīng)用商店，甚至聊天客戶端，CSS都無處不在并且沒有任何消退的跡象。CSS也叫層疊樣式表（CascadingStylesheet），在頁面制作時采用CSS技術(shù)，可以控制文本的顏色、字體的樣式、段落的間距、背景的圖像顏色以及其他各種視覺效果。其主要優(yōu)勢在于，相同的CSS可以用在多個頁面上。當(dāng)CSS與HTML、XHTML結(jié)合使用時，CSS展現(xiàn)出了強大的能力?！ SS盒模型，是基于CSS的L元素的一組規(guī)則，制定了元素的高度、寬度、內(nèi)邊距、邊框和外邊距是如何度量的，下面從盒模型是什么開始講起?！ ?CSS盒模型概念 XMTML
3、中大部分的元素（特別是塊狀元素），都可以看作是一個盒子，而網(wǎng)頁的元素定位實際就是這些大大小小盒子在頁面中的定位。當(dāng)某個塊狀元素被CSS設(shè)置了浮動屬性，這個盒子就會自動排到上一行。網(wǎng)頁布局即關(guān)注這些盒子在頁面中如何擺放、如何嵌套的問題。為什么要把XHTML元素作為盒模型來研究呢？因為XHTML元素的特性和盒子非常相似，盒子中的內(nèi)容到盒子的邊框之間的距離及填充（padding）；盒子本身有邊框（border）；盒子邊框外和其他盒子之間有邊界（margin），效果如圖1所示?！ D1盒模型示意圖 大多數(shù)XHTML元素的結(jié)構(gòu)都類似于圖一所示，除了
4、包含的內(nèi)容（文本或圖片）外，還有內(nèi)邊距、邊框和外邊距一層層的包裹。我們在布局網(wǎng)頁和定位XHTML元素時要充分地考慮這些要素才可以更加自如地擺弄這些盒子。下面我們就重點講一講盒子的外邊距margin屬性的應(yīng)用。 2CSS盒模型中的margin屬性 margin屬性應(yīng)用于盒子外面的空間，或者是位于盒子和瀏覽器窗口之間的區(qū)域，又或者是位于盒子和文檔中其他元素之間的區(qū)域。表一顯示了各種margin屬性。margin屬性是margin-top、margin-right、margin-bottom和margin-left四個單獨屬性的簡寫屬性。值得注意
5、的是盒模型簡寫屬性總是以順時針方向指定，從top開始：top、right、bottom和left。 2.1margin的基本寫法 表達式：margin：toprightbottomleft； margin屬性值是數(shù)值單位，可以是長度、百分比或auto，margin甚至可以設(shè)為負值，造成BOX與BOX之間的重疊顯示?！ ±纾簃argin：70px100px50px100px；可以看到這個語句給相應(yīng)內(nèi)容設(shè)置了有70px上外邊距，100px的左右外邊距和50px的下外邊距的BOX?！ argin在書寫時可以省略參數(shù)，基本原則如下： 1）如
6、果沒有l(wèi)eft值，則默認使用right值替代； 2）如果沒有bottom值，則默認使用top值替代； 3）如果沒有right值，則默認使用top值替代。 例如：margin：50px100px；這個語句等同于 margin：50px100px50px100px； margin：50px；這個語句等同于 margin：50px50px50px50px； 2.2margin邊界折疊問題 在CSS中，當(dāng)兩個或多個BOX的上或下外邊距接觸時，會產(chǎn)生外邊距折疊。只有垂直margin會折疊，水平margin不會。相鄰兩個BOX折疊后的最終m
7、argin值計算方法如下： 1）兩者都為正值，取值大者； 2）值有正負，兩者都取絕對值，再用正值減去最大絕對值； 3）全為負值，兩者都取絕對值，再用0減去最大絕對值。 如果一個子元素的外邊距直接接觸到父元素的外邊界，也會發(fā)生margin折疊。如上算法，較大的外邊距是勝利者，勝利的外邊距總是應(yīng)用到父元素，子元素的margin總是被折疊。因此，如果可以防止兩個外邊距相互接觸，那么margin折疊就可以避免?？梢酝ㄟ^對父元素使用內(nèi)邊距或者邊框來防止兩個外邊距接觸。 但是在一些特殊情況或是一些設(shè)置前提下，盒模型的垂直margin不會被折疊。如
8、果相鄰的盒模型中，其中一個是浮動的（floated），那么垂直margin則不會被折疊，而且這個浮動盒模型的里的子元素之間也不會折疊；設(shè)置了displ
