极客观点
项目管理
HarmonyOS
<!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>脚本的内容是把div元素的最后一个子元素的marginBottom值不断减少,并把div的元素的高度输出到div的第一个子元素中
其中当div元素设置了边框的时候,减少最后一个元素的marginBottom值会发现div这个父元素的高度在不断减少
当div元素不设置边框的时候,减少最后一个元素的marginBottom值会发现div这个父元素的高度不再变化
而且下面定义的h1的hello在以上的两种情况下都可以穿透div里面的文本
请问一下如何解释这种现象
个人认为这是外边距合并的问题。
问题一
这是因为设置在dot元素上的外边距相当于转移到父元素上，所以通过
window.getComputedStyle(document.body.firstElementChild).height取到的div的content-box高度是不会发生变化的。问题二
设置边框后外边距不再合并，所以div父元素content-box为子元素的border-box高度总和，会随着dot元素的marigin-bottom减少而减少。
问题三