javascript宽高理解

 body{
        border: 20px solid #ccc;
        margin: 10px;
        padding: 40px;
        background-color: #eee;
        height: 350px;
        width: 500px;
        overflow: scroll
    }

  console.log(document.body.clientHeight) //430
        console.log(document.body.clientWidth)  //580

clientWidth和clientHeight

假如无/有padding无滚动

 clientWidth = style.width
 clientWidth = style.width + style.padding * 2

假如有padding且有滚动，且滚动是显示的

 clientWidth = style.width+style.padding*2-滚动轴宽度

clientLeft和clientTop：返回的是元素周围边框的厚度，如果不指定一个边框不定位该元素，他的值为0

 body{
            border:20px solid #ccc;
            margin: 10px;
            padding: 40px;
            background: #eee;
            height: 350px;
            width: 500px;
            overflow: scroll
        }

console.log(document.body.clientLeft)//20
console.log(document.body.clientTop)//20

clientTop = border- top的border- width

clientLeft = border- left的border- width