margin相容之margin-top的傳遞問題(面試題)
阿新 • • 發佈：2020-10-27
問題:margin的相容margin-top的傳遞
描述:大盒子裡面巢狀小盒子,給小盒子新增margin-top值,不但沒有實現和大盒子之間的間距,反而傳遞到大盒子上,導致整體下移
解決相容性問題:
- overflow:hidden解決margin-top的傳遞問題(此處不是溢位隱藏)
- padding-top:1px 這種方法會影響最後實際的高度，需要再高度height的基礎上減掉,才不會影響最後實際的高度
- border-top:1px 這種方法會影響最後實際的高度,需要再高度height的基礎上減掉,才不會影響最後實際的高度
- 給子元素的margin-top值改為給父元素加padding-top這樣就避免了使用margin-top值導致的傳遞問題(轉移了我們的目標物件)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 /* .wrap{ 12 width: 300px; 13 height: 300px; 14 background-color:#f90;15 } */ 16 .inner{ 17 margin-top: 20px; 18 width: 200px; 19 height: 200px; 20 background-color: aqua; 21 } 22 /* ===========================無情分割線======================= */ 23 /*解決方法1*/ 24 /* .wrap{ 25 width: 300px; 26 height: 300px; 27 background-color:#f90; 28overflow: hidden; 29 } */ 30 /*解決方法2*/ 31 /* .wrap{ 32 width: 300px; 33 height: 299px; 34 background-color:#f90; 35 padding-top: 1px; 36 } */ 37 /* 解決方法3 */ 38 .wrap{ 39 width: 300px; 40 height: 299px; 41 background-color:#f90; 42 border: 0; 43 border-top-width: 1px; 44 border-style: solid; 45 border-color: transparent; 46 } 47 /* 解決方法4 */ 48 /* .wrap{ 49 width: 300px; 50 height: 300px; 51 background-color:#f90; 52 padding-top: 20px; 53 } 54 .inner{ 55 /* margin-top: 20px; */ 56 width: 200px; 57 height: 200px; 58 background-color: aqua; 59 } */ 60 </style> 61 </head> 62 <body> 63 <div class="wrap"> 64 <div class="inner"></div> 65 </div> 66 </body> 67 </html>