解決CCS中的margin：top塌陷問題
我要評論HTML結(jié)構(gòu)如下：
CCS結(jié)構(gòu)如下：
頁面效果圖如下：
現(xiàn)在我們可以看到在子元素中明明設置了向右50px和向下50px，可頁面顯示的效果卻只有向右移動的沒向下移動的。
通常來說，margin是設置元素的外邊距，正常情況下設置margin值時應該是父元素相對于瀏覽器定位，子元素相對于父元素定位；而現(xiàn)在設置了
margin-top: 50px，頁面卻沒效果這就說明是margin塌陷。
那什么是margin塌陷呢？
在子級中當設置margin-top: 50px;時,里面的盒子并沒有改變，但是在給子元素設置margin-top: 150px;大于父盒子的高度時,子元素就不會再相對于父元素定位了而是帶著父元素一起相對于瀏覽器去定位向下移動150px;這就說明是margin塌陷。(margin塌陷是在父級相對于瀏覽器進行定位時而子級并沒有相對于父級定位，子級相對于父級就像塌陷了一樣)
當我們把margin-top: 50px調(diào)成大于父級元素的高度時，子元素就不會再相對于父元素定位了而是帶著父元素一起相對于瀏覽器去定位向下移動150px;
頁面效果圖如下：
要想解決margin塌陷問題就嘚使用bfc的概念：
bfc是指：block format context(塊級格式上下文),觸發(fā)bfc的元素將會改變一小部分的渲染規(guī)則，可用于解決些css的疑難bug；
觸發(fā)bfc的元素有：
position：absolute;
display：inline-block;
float：left/right;
overflow：hidden;
CSS結(jié)構(gòu)如下：
頁面效果如下：
通過以上任意一行即可彌補margin塌陷的問題~
總結(jié)
到此這篇關于CCS中的margin：top塌陷問題的文章就介紹到這了,更多相關CCS margin：top塌陷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
浮動指的是一個元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動 float屬性的相關知識，感興趣的朋友一起看看吧2020-02-24
這篇文章主要介紹了html/css中float浮動的用法實例詳解,需要的朋友可以參考下2019-09-10
這篇文章主要介紹了css float left布局換行不正常問題的解決的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-06
css 布局 之 兩端布局的實例代碼 （利用父級負的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋2020-06-08
這篇文章主要介紹了css中子元素設置margin-top為什么影響了父元素，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2019-05-22
外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下2018-10-30
CSS 同級元素position:fixed和margin-top共同使用的問題
這篇文章主要介紹了CSS 同級元素position:fixed和margin-top共同使用的問題的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-13
這篇文章主要介紹了詳解css使既有浮動又有左右margin的多個元素兩端對其,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-07
這篇文章主要介紹了CSS中的float和margin的混合使用，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-12
