这张图找了很久……
盒模型结构
clientLeft 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client</title>
</head>
<script>
window.onload=function(){
oDiv1=document.querySelector('.div1');
oP=document.querySelector('p');
oP.innerHTML='oDiv1.clientLeft='+oDiv1.clientLeft
+'<br/>client=客户端，这里泛指div1'+
'<br/>所以oDiv1.clientLeft也就等于oDiv1的左边宽度'
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 20px;
height: 20px;
background: #99a9b3;
}
.div1{
width: 50px;
height: 50px;
background: #c7e6aa;
border: 10px solid #297CBB;
position: absolute;
top: 30px;
left: 30px;
}
p{
position: absolute;
left: 30px;
top: 120px;
}
</style>
<body>
<div class="div1"></div>
<p></p>
</body>
</html>
再给body添加背景色发现一个很奇怪的问题，就是body背景色脱离本身宽高的影响，这完全不合常理。
body背景色
查阅资料可知：
当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的。一旦html标签含有背景色，则body的背景色变成了正常的body标签（一个实实在在，普普通通标签）的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。
网友评论