国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

margin-top 外邊距合并

shmily / 1877人閱讀

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

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

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

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

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

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

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

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

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

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

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

在一個(gè)浮動(dòng)框和其它框之間的垂直邊距不重合。

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

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

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

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

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

存在垂直邊距

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

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

外邊距合并的解決方式：

父級元素增加border,overflow

使用定位或者是浮動(dòng)

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

隨筆一行
這是前端最好的時(shí)代， 這也是前端最壞的時(shí)代。 眾多前端框架滿天飛，隨著 jQuery 在前端行業(yè)的慢慢弱化，總是會(huì)有一種斯人遠(yuǎn)去，何者慰籍的感覺。互勉吧，各位。

另推薦個(gè)表格組件gridManager

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

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

相關(guān)文章

  • CSS之表格邊框合并、兄弟標(biāo)簽外邊距合并、父子標(biāo)簽的外邊距合并

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

    _Dreams 評論0 收藏0

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

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

    longshengwang 評論0 收藏0

  • CSS margin合并問題

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

    zhongmeizhi 評論0 收藏0

  • CSS進(jìn)階指南

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

    SolomonXie 評論0 收藏0

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

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

    zacklee 評論0 收藏0

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

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

    paulli3 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<