成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

margin-top 外邊距合并

shmily / 1885人閱讀

摘要：中，水平邊距永遠不會重合。垂直邊距可能在特定的框之間重合常規(guī)流向中兩個或多個塊框相鄰的垂直邊距會重合。結(jié)果的邊距寬度是相鄰邊距寬度中較大的值。如果出現(xiàn)負邊距，則在最大的正邊距中減去絕對值最大的負邊距。絕對和相對定位的框的邊距不重合。

這是一個早以前研究過的東西，今天java開發(fā)說起了這個，順帶記錄一下。
這里有一行代碼，很簡單的一段代碼

可是在瀏覽器中打開后，居然是這個樣子的~

( 黑色的區(qū)塊為div1,紅色的為div2 )

從效果上看div2的margin-top像是沒有生效，經(jīng)測量div1的margin-top值，發(fā)現(xiàn)這個div2的margin-top像是生效到div1上了。

就這幾行代碼寫錯是不大可能，那這又是怎么回事？

之前遇到這個問題時，試遍了所有的瀏覽器，都是這個樣子；我就覺著這是個兼容性極佳的BUG。

后來一個偶然的機會發(fā)現(xiàn)在父級上增加border或者overflow:hidden是可以規(guī)避這個問題，且這個問題只會在常規(guī)流向中出現(xiàn)，也就是說用position或者是float都不會存在這個問題。

整點原理規(guī)范什么的提高一下；百度一下，你就知道。。

邊距重合 來源:W3C CSS2.1 
在本規(guī)范中，表述邊距重合意味著兩個或多個框（可能相鄰也可能嵌套）的相鄰的邊距（其間沒有邊白或邊框間隔）重合在一起而形成一個單一的邊距。
CSS2中，水平邊距永遠不會重合。
垂直邊距可能在特定的框之間重合：

常規(guī)流向中兩個或多個塊框相鄰的垂直邊距會重合。結(jié)果的邊距寬度是相鄰邊距寬度中較大的值。如果出現(xiàn)負邊距，則在最大的正邊距中減去絕對值最大的負邊距。如果沒有正邊距，則從零中減去絕對值最大的負邊距。

在一個浮動框和其它框之間的垂直邊距不重合。

絕對和相對定位的框的邊距不重合。

首先了解到這并不是BUG，而是個規(guī)范，雖然看上去像是BUG
按著規(guī)范試一下,覺著還是像是個BUG。

看規(guī)范是一目十行，過目就忘,還是整理一下。

外邊距合并的觸發(fā)條件：

常規(guī)流向布局，未使用定位或者是浮動

存在垂直邊距

父級元素不存在border,overflow:hidden

在父級元素與子元素之間不存在擁有實際高度的元素(包含文本)

外邊距合并的解決方式：

父級元素增加border,overflow

使用定位或者是浮動

使用padding-top替代margin-top,比較推薦這個。

隨筆一行
這是前端最好的時代， 這也是前端最壞的時代。 眾多前端框架滿天飛，隨著 jQuery 在前端行業(yè)的慢慢弱化，總是會有一種斯人遠去，何者慰籍的感覺?；ッ惆?，各位。

另推薦個表格組件gridManager

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104298.html

相關(guān)文章

  • CSS之表格邊框合并、兄弟標簽外邊距合并、父子標簽的外邊距合并

    摘要：本文內(nèi)容表格邊框合并兄弟標簽外邊距合并父子標簽的外邊距合并首發(fā)日期表格邊框合并發(fā)生情況當設(shè)置了后，表格的相鄰邊框會合并，使得邊框變粗了。 本文內(nèi)容： 表格邊框合并 兄弟標簽外邊距合并 父子標簽的外邊距合并 ? 首發(fā)日期：2018-05-01 ? 表格邊框合并： ? 發(fā)生情況： 當設(shè)置了cellpadding=0 cellspacing=0后，表格的相鄰邊框會合并，使得邊框變粗了。 D...

    _Dreams 評論0 收藏0

  • CSS--外邊距合并的問題

    摘要：外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。 首先看下W3C對于外邊距合并的介紹： 外邊距合并...

    longshengwang 評論0 收藏0

  • CSS margin合并問題

    摘要：兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。 在CSS當中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。 1. 折疊的結(jié)果 兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。 兩個相鄰的外邊距都是負數(shù)時...

    zhongmeizhi 評論0 收藏0

  • CSS進階指南

    摘要：二正文脫離文檔流脫離文檔流的元素都是塊級元素。參考資料什么是文檔流指語言文本從左到右，從上到下顯示，這是傳統(tǒng)文檔的文本布局。定位不脫離文檔流，設(shè)置沒有作用，對敏感。允許指定負的外邊距值。 一 前言 要想掌握CSS部分的內(nèi)容其實并不容易，盡管你已經(jīng)閱讀過相當多的關(guān)于CSS的書籍，但是還是免不了去網(wǎng)上搜索相關(guān)的知識擴大你對CSS內(nèi)容的掌握。在網(wǎng)絡(luò)上查找最好的地方當然是CSS官網(wǎng)文檔，不過英...

    SolomonXie 評論0 收藏0

  • CSS盒子模型以及外邊框合并的問題

    摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...

    zacklee 評論0 收藏0

  • CSS盒子模型以及外邊框合并的問題

    摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...

    paulli3 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<