IT技(ji)術互動交流平台

首頁 > 網頁設計 > HTML/CSS > 正(zheng)文

万人龙虎官网

作者︰whl  發布(bu)日期(qi)︰2020-02-18 12:27:00
  說到(dao)CSS可能(neng)有部分用戶(hu)因為平時並沒有接觸到(dao)因此(ci)了解的並不多或者根(gen)本沒有了解過。那(na)麼什(shi)麼是CSS的外(wai)邊距折疊呢,它又有什(shi)麼作用呢?說到(dao)CSS可能(neng)有部分用戶(hu)因為平時並沒有接觸到(dao)因此(ci)了解的並不多或者根(gen)本沒有了解過。那(na)麼什(shi)麼是CSS的外(wai)邊距折疊呢,它又有什(shi)麼作用呢?所謂的外(wai)邊距折疊意思就是說把(ba)兩個或幾(ji)個鄰近的外(wai)邊距合並成一個大的外(wai)邊距,下(xia)面小編(bian)就給大家詳細的講解一下(xia),感(gan)xing)巳?囊黃鶩xia)看吧!

  外(wai)邊距折疊指的是毗鄰的兩個或多個外(wai)邊距 (margin) 會合並成一個外(wai)邊距,本文詳細的介紹了一下(xia)css外(wai)邊距折疊的實(shi)現,分為3種(zhong)情(qing)況(kuang),非常具(ju)有實(shi)用價值(zhi),需要的朋友可以(yi)參考下(xia)

  前文

  這是的一個經典的老問題,因為之前剛(gang)好(hao)有讀者朋友問shi)dao),順便整理一下(xia)。

  從(cong)一個簡單例(li)子(zi)說起

  先看一個簡單示例(li)︰

先看一個簡單示例(li)

  看這個例(li)子(zi)中(zhong)的兩個p標(biao)簽,根(gen)據樣(yang)式定(ding)義(yi)︰第一個p的margin-bottom和第二(er)個p的margin-top 都是10px,那(na)實(shi)dao)示 胗Ω玫扔yu)20px才對,但是用瀏(liu)覽器查看一下(xia)可以(yi)發現,最終的邊距是10px。 這個例(li)子(zi)就是外(wai)邊距折疊︰塊級元素的上外(wai)邊距和下(xia)外(wai)邊距有時會合並(或折疊)為一個外(wai)邊距。

  分類情(qing)況(kuang)

  外(wai)邊距折疊有3種(zhong)基(ji)本情(qing)況(kuang)︰

  相鄰元素

  父元素和第一個子(zi)元素(或者最後一個子(zi)元素,等下(xia)記(ji)得回頭思考下(xia)這里為啥(sha)是第一個或者最後一個)

  空(kong)的塊級元素

  先不急著(zhou)記(ji)憶,首先,前文的例(li)子(zi)中(zhong)就是第一種(zhong)情(qing)況(kuang)--相鄰的兩個元素之間發生的外(wai)邊距折疊。

  第二(er)種(zhong)和第三(san)種(zhong)情(qing)況(kuang)如(ru)下(xia)︰

父元素和第一個子(zi)元素
代碼示例(li)

  他們的圖像也(ye)分zhi)bie)如(ru)圖︰

  情(qing)況(kuang)2︰ 子(zi)元素的外(wai)邊距會“轉(zhuan)移”到(dao)父元素的外(wai)面

  情(qing)況(kuang)3︰該元素的上下(xia)外(wai)邊距會折疊

  好(hao)了,到(dao)這里我們不妨來(lai)看chun)湊餳ji)種(zhong)情(qing)況(kuang)的共同點(建議畫一下(xia)他們的盒模型,我懶就不畫了-_-),可以(yi)發現發生外(wai)邊距折疊的共同原因︰margin之間直(zhi)接接觸,沒有阻隔。

  如(ru)何理解直(zhi)接接觸?很簡單︰

  •第一個例(li)子(zi)中(zhong),兩個標(biao)簽的垂直(zhi)方向margin是直(zhi)接接觸的;

  •第二(er)個例(li)子(zi)中(zhong),由于(yu)父元素的padding,border都為0,所以(yi)margin和它的子(zi)元素也(ye)是直(zhi)接接觸的。(這個例(li)子(zi)畫出盒模型就很好(hao)理解)

  •第三(san)個例(li)子(zi)中(zhong),空(kong)元素本身(shen)的上下(xia)邊距也(ye)是直(zhi)接接觸的(padding,border也(ye)是0)

  各種(zhong)情(qing)況(kuang)下(xia)折疊的結果

  折疊後的邊距如(ru)何計算,這個可以(yi)簡單驗證(zheng)下(xia)︰

  •如(ru)果兩個外(wai)邊距都是正(zheng)值(zhi),折疊後的邊距取較大的一個

  •如(ru)果兩個邊距一正(zheng)一負,折疊後的邊距為邊距之和

  •如(ru)果兩個邊距都為負數,折疊後邊距為較小的邊距之和

  如(ru)何防止外(wai)邊距折疊

  前文說到(dao),發生外(wai)邊距折疊的原因是,外(wai)邊距直(zhi)接接觸,因此(ci)防止折疊的方式就是,阻隔這個直(zhi)接接觸,組合xi)姆椒  /p>

  •嵌套情(qing)況(kuang)只(zhi)要border padding 非0,或者有inline元素隔開,比如(ru)父元素里加一行(xing)文字也(ye)可以(yi)(可以(yi)直(zhi)接在(zai)情(qing)況(kuang)2嘗試)

  •任何借助bfc形成阻隔的方式,如(ru)浮動,display:table等(BFC不熟悉的同學先查查,我後面補上)

  小結

  通過上面這些(xie)內容的學習相信大家對于(yu)CSS外(wai)邊距折疊這方面的了解又加深了一些(xie)吧?上面這些(xie)介紹還(huai)是比較淺顯的,如(ru)果大家想(xiang)要了解更多內容還(huai)可以(yi)自己進行(xing)搜索,小編(bian)這里就不一一進行(xing)講解了。如(ru)果大家還(huai)有什(shi)麼不明白(bai)的歡迎提出,小編(bian)會及時解答的。

万人龙虎官网

    Tag標(biao)簽︰CSS外(wai)邊距  外(wai)邊距折疊  
    • 万人龙虎官网

    About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免(mian)責條款 - 網站地圖 - 網友投稿 - 聯(lian)系(xi)方式
    本站內容來(lai)自于(yu)互聯(lian)網,僅供用于(yu)網絡技(ji)術學習,學習中(zhong)請遵循相關法律(lv)法規(gui)
    万人龙虎官网 | 下一页