如何解釋下面這個css現(xiàn)象

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <title>Document</title>
  <style>
    div {
      /* border: 1px solid #000; */
      width: 50%;
      margin: 0 auto;
      font-size: 16px;
      text-align: center;
    }

    #dot {
      margin-bottom: 50px;
    }
    h1 {
      margin: 0 auto;
      width: 20px;
    }
  </style>
</head>

<body>
  <div>
    <p id="height"></p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p id="dot">.</p>
  </div>
  <h1>hello</h1>
  <script>
    window.onload = function () {
      function animate() {
        document.getElementById('height').innerHTML = window.getComputedStyle(document.body.firstElementChild).height;
        var dot = document.getElementById('dot');
        var m = window.getComputedStyle(dot).marginBottom;
        console.log(m);
        m = parseInt(m);
        m -= 1;
        document.getElementById('dot').style['margin-bottom'] = m + 'px';
        requestAnimationFrame(animate);
      }
      animate();
    }
  </script>
</body>

</html>

腳本的內(nèi)容是把div元素的最后一個子元素的marginBottom值不斷減少,并把div的元素的高度輸出到div的第一個子元素中
其中當(dāng)div元素設(shè)置了邊框的時候,減少最后一個元素的marginBottom值會發(fā)現(xiàn)div這個父元素的高度在不斷減少
當(dāng)div元素不設(shè)置邊框的時候,減少最后一個元素的marginBottom值會發(fā)現(xiàn)div這個父元素的高度不再變化
而且下面定義的h1的hello在以上的兩種情況下都可以穿透div里面的文本
請問一下如何解釋這種現(xiàn)象

回答

編輯回答

拼未來

個人認(rèn)為這是外邊距合并的問題。

如果在父元素與其最后一個子元素之間不存在邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height、max-height將兩者的 margin-bottom 分開，那么這兩對外邊距之間會產(chǎn)生折疊。此時子元素的外邊距會“溢出”到父元素的外面。

問題一

div元素不設(shè)置邊框的時候,減少最后一個元素的marginBottom值會發(fā)現(xiàn)div這個父元素的高度不再變化。

這是因為設(shè)置在dot元素上的外邊距相當(dāng)于轉(zhuǎn)移到父元素上，所以通過window.getComputedStyle(document.body.firstElementChild).height取到的div的content-box高度是不會發(fā)生變化的。

問題二

當(dāng)div元素設(shè)置了邊框的時候,減少最后一個元素的marginBottom值會發(fā)現(xiàn)div這個父元素的高度在不斷減少。

設(shè)置邊框后外邊距不再合并，所以div父元素content-box為子元素的border-box高度總和，會隨著dot元素的marigin-bottom減少而減少。

問題三

下面定義的h1的hello在以上的兩種情況下都可以穿透div里面的文本。

有邊框時因為div高度減少所以h1的布局位置上移；
沒有邊框時，因為div有負的margin-bottom所以布局位置上移。

2018年5月1日 11:25

編輯回答

故人嘆

你應(yīng)該是理解上出現(xiàn)了偏差，設(shè)置元素的margin-bottom，并不會改變元素的height的應(yīng)用值，height屬性只是其內(nèi)容區(qū)的高度。
對于現(xiàn)象解釋，首先要知道：塊級元素正常布局時，盒子間的距離是由margin邊決定的。
第一個情況：因為外邊距合并，兩個盒子的距離就是負數(shù)了，效果就是hello上移（為什么負margin會上移，我也沒找到相關(guān)介紹，可能因為是各大瀏覽器廠商的共識吧），所以會穿透文本
第二個情況：因為第一個盒子高度是auto,根據(jù)布局規(guī)則#dot設(shè)置負margin會導(dǎo)致它的高度變矮，然后hello和它距離不會變化，但它的overflow為visible所以內(nèi)容會溢出，看起來也是hello穿透文本