父子盒子边距塌陷之为什么设置margin-top父子盒子会一起移动

为什么给子元素设置margin-top值时或者给父元素设置margin-top值时父子盒子会一起移动？今天在写一个页面布局题时遇到了这个问题，查找了一些资料原来是大名鼎鼎的盒子边距塌陷问题。
更加正规的描述：
父子关系外边距塌陷的表现是：
父盒子和子盒子粘在一起了，当给父盒子设置margin-top时，子盒子跟着父盒子一块下移了。给子盒子设置margin-top时，父盒子也跟着走。当子盒子和父盒子都设置margin-top时，哪个值大，就按照哪个值。
塌陷原因：父子盒子公用一个外边距区域。
视频样式，注意我操作的是子盒子的margin-top

盒子塌陷

需要注意的是这里并不是讲解如何清楚浮动，但是浮动的盒子塌陷也是一个道理。但是方法会多一些。建立去看pink的基础视频，里面有讲到
demo:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title>document</title><link rel="stylesheet" href="./css/style.css" /></head><body><div class="main"><div class="body_">nihao</div></div></body>
</html>

css样式：

/*TODO：请补充代码
*/
*{margin: 0;padding: 0;
}
.main{height:440px ;background-color: #a6b1e1; /* overflow:hidden *//* border: 1px solid rgb(255, 255, 255); *//* padding-top: 1px;  */
}.body_{height: 427px;width: 1024px;margin-top: 13px; background-color: pink;
}

demo很简单。就是一个父盒子一个子盒子。当我想要子盒子距离父盒子顶端13px时发现无法设置成功，并且父盒子距离最顶端有13px距离，并且父盒子距离顶端的距离随着子元素设置的margin-top值的增大而增大。

解决办法

如css样式中的main类中注释区域所示，任选一行使用即可解决问题。

 overflow:hidden border: 1px solid rgb(255, 255, 255); padding-top: 1px;

其实原理也比较简单就是使用overflow:hidden可以触发BFC规则，什么是BFC呢，就是 W3C CSS2.1 规范中的一个概念。全称Block Formatting Contexts (块级格式化上下文)。当它被触发时形成一个独立的区域，内部元素垂直排列。详细可见BFC是什么
第二行注释和第三行注释其实是一个道理就是为了把父子盒子分隔开，使得他们不占用同一块上边距区域。
本篇就是简单记录一些遇到的问题，水平有限如果有什么问题欢迎大家评论区交流。

参考博文：http://t.csdn.cn/U1VWN

父子盒子边距塌陷之为什么设置margin-top父子盒子会一起移动相关推荐

（盒子模型常见问题）外边距合并问题，嵌套盒子边距塌陷问题解决
1.兄弟盒子边距合并. <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
CSS之盒子的边距塌陷（兄弟、父子）与解决方案
文章目录问题引入一.边距塌陷二.相邻(兄弟)盒子之间的塌陷解决方法三. 父子盒子之间的塌陷解决方法 tip:为能更直观地学习,本文章已省略部分css样式代码. 问题引入如下图所示,在制作 ...
CSS 盒子的边距塌陷
tip:为能更直观地学习,本文章已省略部分 css 样式代码. 我相信下面的情形大家在日常工作中常常碰到:在制作静态页面中,为了页面整体的协调与美观,我们想让子盒子 image-div 的上边沿距离父 ...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...
定位组成，相对定位，绝对定位，固定定位、定位的特殊性，脱标的盒子不会触发外边距塌陷，绝对定位（固定定位）会完全压住盒子，焦点图布局（html+css）
定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 定位:将盒子定在某一个位置.所以也是在摆放盒子,按照定位的方式移动盒子. 定位=定位模式+边偏移定位模式 ...
【前端知识整理】边距塌陷问题什么是BFC 如何阻止边距塌陷
边距塌陷和BFS 边距塌陷边距塌陷是什么边距塌陷发生的几种情况 1 两个相邻的兄弟姐妹元素之间 2 块级父元素与其第一个/最后一个子元素之间 3 空块元素 BFC 什么是BFC 如何创建(触发)B ...
html盒子模型图片居中,html学习笔记（img+body+盒子模型+块级元素居中+margi塌陷+float+文字围绕、打点）...
1.使用img产生间隔问题 img属于行级块级元素(标签)其属性display的值为inline-block,因有inline元素,故有文字属性,如果换行使用多个img标签来显示图片的时候,因换行带来 ...
外边距塌陷/外边距合并
外边距合并外边距合并一般发生在兄弟元素之间.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于:若两个外边距为两正,取较大者,若两个外边距一正一负,取 ...
网页的盒子模型是什么？怎么设置盒子样式
网页的盒子模型是什么?怎么设置盒子样式欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树S ...
外边距塌陷之clearance
在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢? .outer{ overf ...

父子盒子边距塌陷之为什么设置margin-top父子盒子会一起移动

解决办法

父子盒子边距塌陷之为什么设置margin-top父子盒子会一起移动相关推荐

最新文章

热门文章