網(wǎng)頁標準文檔流中垂直方向的margin塌陷現(xiàn)象

simon_chen 發(fā)布于2019-08-02 14:01 / 820人閱讀

摘要：在標準文檔流中即沒有浮動，如果設(shè)置了浮動那就不會出現(xiàn)這中情況了，中有兩個元素，這兩個元素的寬高都是，第一個設(shè)置了第二個設(shè)置了，那么實際上兩個元素之間的距離是，這就是塌陷現(xiàn)象，并且塌陷還是以大的一方為準。

在標準文檔流中（即沒有浮動，如果設(shè)置了浮動那就不會出現(xiàn)這中情況了），body中有兩個div元素，這兩個div元素的寬、高都是200px，第一個div設(shè)置了margin-bottom:t0px;第二個div設(shè)置了margin-top:20px，那么實際上兩個div元素之間的距離是50px，這就是margin塌陷現(xiàn)象，并且margin塌陷還是以大的一方為準。如圖片：




    
        margin-bottom: 50px;
    
    
        margin-top: 20px;

云服務(wù)器 GPU云服務(wù)器云服務(wù)器網(wǎng)絡(luò)帶寬受限的現(xiàn)象 C 從 UTF-8 流中讀取字符串的正確標準網(wǎng)頁 margin:

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

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

相關(guān)文章

網(wǎng)頁標準文檔流中垂直方向的margin塌陷現(xiàn)象

摘要：在標準文檔流中即沒有浮動，如果設(shè)置了浮動那就不會出現(xiàn)這中情況了，中有兩個元素，這兩個元素的寬高都是，第一個設(shè)置了第二個設(shè)置了，那么實際上兩個元素之間的距離是，這就是塌陷現(xiàn)象，并且塌陷還是以大的一方為準。在標準文檔流中（即沒有浮動，如果設(shè)置了浮動那就不會出現(xiàn)這中情況了），body中有兩個div元素，這兩個div元素的寬、高都是200px，第一個div設(shè)置了margin-bottom:t...

flybywind 2019-08-30 15:55 評論0 收藏0
CSS知識點及技巧整理

摘要：當元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。詳見浮動與清除浮動浮動相關(guān)知識屬性的取值元素向左浮動。是相對長度單位，相對于當前對象內(nèi)文本的字體尺寸。這些個知識點是我個人認為的，下面我們就來看看這些個知識點。 1.怎么讓一個不定寬高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子設(shè)置：display: flex; justify-content: cent...

masturbator 2019-08-30 14:02 評論0 收藏0
CSS知識點及技巧整理

摘要：當元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。詳見浮動與清除浮動浮動相關(guān)知識屬性的取值元素向左浮動。是相對長度單位，相對于當前對象內(nèi)文本的字體尺寸。這些個知識點是我個人認為的，下面我們就來看看這些個知識點。 1.怎么讓一個不定寬高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子設(shè)置：display: flex; justify-content: cent...

EasonTyler 2019-08-01 18:38 評論0 收藏0
web前端（11）—— 頁面布局1

摘要：維護起來更加方便不足雪碧的最大問題是內(nèi)存使用拼圖維護比較麻煩使的編寫變得困難雪碧調(diào)用的圖片不能被打印我們可以使用綜合屬性制作通天，什么是通天呢，就是一般我們電腦的屏幕都是但是設(shè)計師給我們的圖都會比這個大，那么我們可以此屬性來制作通天。要說頁面布局的話，那就必須說說margin，padding，和background。這三個屬性其實都是前面講過的，這里還是再次講解以下，為什么呢？因為是這樣的...

番茄西紅柿 2019-04-23 13:11 評論0 收藏0