margin塌陷
一：什么是margin塌陷
在標準文檔流中，豎直方向的margin會出現(xiàn)疊加現(xiàn)象（水平方向不會塌陷），兩個margin緊挨著，中間沒有border或者padding
margin直接接觸，就產(chǎn)生了合并
表現(xiàn)為較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有一個較大的margin，這就是margin塌陷現(xiàn)象
二：margin塌陷的分類
1、兄弟關(guān)系的盒子
2、父子關(guān)系的盒子
兄弟并列
如下圖所示：
?
兩盒子之間的距離僅是50px，也就是說兩盒子之間的margin出現(xiàn)了重疊部分，故而我們可以得出：垂直之間塌陷的原則是以兩盒子最大的外邊距為準。
?
父子關(guān)系
1 /*CSS部分*/ 2 <style> 3 .box1{ 4 width:400px; 5 height:400px; 6 background: pink; 7 } 8 .box2{ 9 width:200px; 10 height:200px; 11 background: lightblue;margin-top：10px 12 } 13 </style> 14 /*HTML部分*/ 15 <body> 16 <divclass="box1"> 17 <divclass="box2"></div> 18 </div> 19 </body>
當為子盒子添加margin-top：10px;時會發(fā)生如下情況：
子盒子和父盒子之間并沒出現(xiàn)期望的10px間隙而是父盒子與子盒子一起與頁面頂端產(chǎn)生了10px間隙。
?
解決方法：
?
1.給父元素增加邊框
為了不影響原先的圖像效果，可以將邊框顏色設(shè)置為白色（與瀏覽器背景顏色一致）。
2.溢出隱藏
在父元素的style里面添加overflow：hidden；
3.利用浮動
給父元素的style添加浮動，但是這種方法不推薦使用。因為會帶來未知的錯誤。
4.給父元素添加position:fixed;
這里用到了定位的知識，將父元素顯示在固定位置，就不會受margin-top塌陷的問題影。
5.使用偽元素
1 .clearfix::before{ 2 content: ”“”; 3 display: table; 4 }?
轉(zhuǎn)載于:https://www.cnblogs.com/cz976230/p/10654402.html
總結(jié)
- 上一篇： IDEA 运行spingboot时出现P
- 下一篇： Web版个人简历