關于CSS中的margin：top塌陷問題
我們先來看看代碼
HTML結構如下：
CCS結構如下：
頁面效果圖如下：
現在我們可以看到在子元素中明明設定了向右50px和向下50px，可頁面顯示的效果卻只有向右移動的沒向下移動的，
通常來說，margin是設定元素的外邊距，正常情況下設定margin值時應該是父元素相對于瀏覽器定位，子元素相對于父元素定位；而現在設定了
margin-top: 50px，頁面卻沒效果這就說明是margin塌陷，那什么是margin塌陷呢？
在子級中當設定margin-top: 50px;時,里面的盒子并沒有改變，但是在給子元素設定margin-top: 150px;大于父盒子的高度時,子元素就不會再相對于父元素定位了而是帶著父元素一起相對于瀏覽器去定位向下移動150px;這就說明是margin塌陷，(margin塌陷是在父級相對于瀏覽器進行定位時而子級并沒有相對于父級定位，子級相對于父級就像塌陷了一樣) 當我們把margin-top: 50px調成大于父級元素的高度時，子元素就不會再相對于父元素定位了而是帶著父元素一起相對于瀏覽器去定位向下移動150px;頁面效果圖如下：
要想解決margin塌陷問題就嘚使用bfc的概念： bfc是指：block format context(塊級格式背景關系),觸發bfc的元素將會改變一小部分的渲染規則，可用于解決些css的疑難bug； 觸發bfc的元素有： position：absolute; display：inline-block; float：left/right; overflow：hidden;
CSS結構如下：
頁面效果如下：
通過以上任意一行即可彌補margin塌陷的問題~
借鑒的博客地址：https://www.cnblogs.com/kungfupan/p/9748346.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/55473.html
標籤：Html/Css
上一篇：vue實作省市區三級聯動
下一篇：html篇