如何解释下面这个css现象

Question

Documentdiv{/*border:1pxsolid#000;*/width:50%;margin:0auto;font-size:16px;text-align:center;}#dot{margin-bottom:50px;}h1{margin:0auto;width:20px;}123456789.hellowindow.onload=function(){functionanimate(){document.getElementById('height').innerHTML=window.getComputedStyle(document.body.firstElementChild).height;vardot=document.getElementById('dot');varm=window.getComputedStyle(dot).marginBottom;console.log(m);m=parseInt(m);m-=1;document.getElementById('dot').style['margin-bottom']=m+'px';requestAnimationFrame(animate);}animate();}脚本的内容是把div元素的最后一个子元素的marginBottom值不断减少,并把div的元素的高度输出到div的第一个子元素中其中当div元素设置了边框的时候,减少最后一个元素的marginBottom值会发现div这个父元素的高度在不断减少当div元素不设置边框的时候,减少最后一个元素的marginBottom值会发现div这个父元素的高度不再变化而且下面定义的h1的hello在以上的两种情况下都可以穿透div里面的文本请问一下如何解释这种现象

Answer 1

个人认为这是外边距合并的问题。
如果在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的margin-bottom分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。
问题一
div元素不设置边框的时候,减少最后一个元素的marginBottom值会发现div这个父元素的高度不再变化。
这是因为设置在dot元素上的外边距相当于转移到父元素上，所以通过window.getComputedStyle(document.body.firstElementChild).height取到的div的content-box高度是不会发生变化的。
问题二
当div元素设置了边框的时候,减少最后一个元素的marginBottom值会发现div这个父元素的高度在不断减少。
设置边框后外边距不再合并，所以div父元素content-box为子元素的border-box高度总和，会随着dot元素的marigin-bottom减少而减少。
问题三
下面定义的h1的hello在以上的两种情况下都可以穿透div里面的文本。
有边框时因为div高度减少所以h1的布局位置上移；
没有边框时，因为div有负的margin-bottom所以布局位置上移。
                            

Answer 2

你应该是理解上出现了偏差，设置元素的margin-bottom，并不会改变元素的height的应用值，height属性只是其内容区的高度。对于现象解释，首先要知道：块级元素正常布局时，盒子间的距离是由margin边决定的。第一个情况：因为外边距合并，两个盒子的距离就是负数了，效果就是hello上移（为什么负margin会上移，我也没找到相关介绍，可能因为是各大浏览器厂商的共识吧），所以会穿透文本第二个情况：因为第一个盒子高度是auto,根据布局规则#dot设置负margin会导致它的高度变矮，然后hello和它距离不会变化，但它的overflow为visible所以内容会溢出，看起来也是hello穿透文本