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

回答

編輯回答

拼未來

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

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

問題一

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

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

問題二

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

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

問題三

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

有邊框時(shí)因?yàn)閐iv高度減少所以h1的布局位置上移；
沒有邊框時(shí)，因?yàn)閐iv有負(fù)的margin-bottom所以布局位置上移。

2018年5月1日 11:25

編輯回答

故人嘆

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

2017年3月26日 16:50