解決CCS中的margin:top塌陷問題

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