先看盒子模型
W3C盒子模型
IE盒子模型
<!DOCTYPE html>
<html>
<head>
<title>視窗寬高</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: #007d65;
margin: 20px 50px;
padding: 30px 60px;
border: 30px solid #7fb80e;
position: absolute;
top: 100px;
left: 200px;
overflow: scroll;
}
</style>
<body>
<div class="box1">
<p>這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框</p>
</div>
</body>
<script type="text/javascript">
box1=document.getElementsByTagName('div')[0];
console.log('offsetTop='+box1.offsetTop); //120
console.log('offsetLeft='+box1.offsetLeft); //250
console.log('offsetWidth='+box1.offsetWidth); //380
console.log('offsetHeight='+box1.offsetHeight); //320
console.log('clientWidth='+box1.clientWidth); //303
console.log('clientHeight='+box1.clientHeight); //243
console.log('scrollWidth='+box1.scrollWidth); //303
console.log('scrollHeight='+box1.scrollHeight); //354
</script>
</html>
Paste_Image.png
有滾動條,滾動條在padding內(nèi),占用了padding,paading不夠填充,便占用content區(qū)域,所以content大小為
width：200(CSS)-17(滾動條)
height：200(CSS)-17(滾動條)
- offsetTop: div上外border線到視窗頂?shù)木嚯x
- offsetLeft: div左外border線到視窗左的距離
- offsetWidth=borderLeft+paddingLeft+cssWidth+paddingRight+borderRight
- offsetHeight=borderTop+paddingTop+cssHeight+paddingBottom+borderBottom
- clientWidth(可視區(qū)域?qū)挾?: paddingLeft+cssWidth+paddingRight-滾動條寬
- scrollWidth(實際內(nèi)容寬度): paddingLeft+cssWidth+paddingRight-滾動條寬+滾動條可以滾動的長度(若無滾動，則等于clientWidth昏名，即本例)
- clientHeight(可視區(qū)域高度): paddingTop+cssHeight+paddingBottom-滾動條寬
- scrollHeight(實際內(nèi)容高度): paddingTop+cssHeight+paddingBottom-滾動條寬+滾動條可以滾動的長度
