<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
box-sizing:content-box;
width:980px;
padding: 10px;
border:1px solid red;
}
</style>
</head>
<body>
</body>
<script>
function log(arg){
console.log(arg);
}
log(document.body.clientWidth);//1000
log(document.body.clientHeight);//20
log(document.documentElement.clientWidth);//1280
log(document.documentElement.clientHeight);//393
</script>
</html>在chrome和firefox下测试得到的都是那个结果，我想问的是为什么计算的时候没有包括border？
谁能给讲讲document.body.clientWidthdocument.documentElement.clientWidth的区别吗？万分感谢！
Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。详情
document.documentElement取得的是html元素,也就是viewport(视口);
viewport的功能在于控制你网站的最高块状（block）容器：<html>元素
viewport是严格的等于浏览器窗口的宽度高度。viewport不是一个HTML的概念，所以你不能通过CSS修改它。而<html>元素为viewport宽度的100%。
视口的尺寸通过 document. documentElement. clientWidth/Height 取得；
document.documentElement.clientWidth/Height不包含滚动条
假设给html元素赋予一个宽度25%,document. documentElement. clientWidth/Height依然给出了viewport的尺寸，而不是<html>元素。这是特殊的规则只针对这个特殊的元素针对这个特性对。在其余任何情况下元素使用实际的宽度。
有关于浏览器视口的详细讲解移步这里