欢迎光临
我的个人博客网站

margin兼容之margin-top的传递问题(面试题)

问题:margin的兼容margin-top的传递

描述:大盒子里面嵌套小盒子,给小盒子添加margin-top值,不但没有实现和大盒子之间的间距,反而传递到大盒子上,导致整体下移

margin兼容之margin-top的传递问题(面试题)

解决兼容性问题:

  1. overflow:hidden解决margin-top的传递问题(此处不是溢出隐藏)
  2. padding-top:1px 这种方法会影响最后实际的高度,需要再高度height的基础上减掉,才不会影响最后实际的高度
  3. border-top:1px 这种方法会影响最后实际的高度,需要再高度height的基础上减掉,才不会影响最后实际的高度
  4. 给子元素的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; 28     overflow: 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>

赞(0) 打赏
未经允许不得转载:张拓的天空 » margin兼容之margin-top的传递问题(面试题)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏