自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

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

作者:灰牛站长•发布时间:2021-07-12 09:43:17•浏览

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

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

解决兼容性问题:

  1. overflow:hidden解决margin-top的传递问题(此处不是溢出隐藏)
  2. padding-top:1px 这种方法会影响最后实际的高度,需要再高度height的基础上减掉,才不会影响最后实际的高度
  3. border-top:1px 这种方法会影响最后实际的高度,需要再高度height的基础上减掉,才不会影响最后实际的高度
  4. 给子元素的margin-top值改为给父元素加padding-top这样就避免了使用margin-top值导致的传递问题(转移了我们的目标对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* .wrap{
width: 300px;
height: 300px;
background-color:#f90;
} */
.inner{
margin-top: 20px;
width: 200px;
height: 200px;
background-color: aqua;
}
/* ===========================无情分割线======================= */
/*解决方法1*/
/* .wrap{
width: 300px;
height: 300px;
background-color:#f90;
overflow: hidden;
} */
/*解决方法2*/
/* .wrap{
width: 300px;
height: 299px;
background-color:#f90;
padding-top: 1px;
} */
/* 解决方法3 */
.wrap{
width: 300px;
height: 299px;
background-color:#f90;
border: 0;
border-top-width: 1px;
border-style: solid;
border-color: transparent;
}
/* 解决方法4 */
/* .wrap{
width: 300px;
height: 300px;
background-color:#f90;
padding-top: 20px;
}
.inner{
/* margin-top: 20px; */
width: 200px;
height: 200px;
background-color: aqua;
} */
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>

相关文章

  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38
  • 定位之相对定位

    定位之相对定位

    相对定位特点 1.不会离文档流 占位 所有后面的元素不会往前跑 2.可以设置上下左右四个方位 如果同的设置了top和bottom值只有top起作用 如果同时设置了...
    2021-07-12 11.07.13
  • 定位之绝对定位

    定位之绝对定位

    定位元素元素层级元素定位滚动条 绝对定位- position: absolute;特点 脱离文档流 可以设置参照物,参照物必须是其父级元素(直系父级),如果直接父级没有会一直...
    2021-07-12 11.07.13
  • padding和margin的区别

    padding和margin的区别

    css盒子模型padding和margin的区别 padding是内边距,会影响我们在浏览器中看到的元素的实际大小,内边距会让元素的内容增大,和其他元素没有关系! margin是外边...
    2021-07-12 09.07.09

手机端