<!DOCTYPE html><html><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)象
如何解釋下面這個css現(xiàn)象
四季花海
2019-03-06 13:13:56
