js与jq处理盒子模型&&定位

有少量错误，待更正

盒子模型

盒子模型的四个关键内容：margin、border、padding、content

jquery

<div id="box1">1</div>
 #box1{
    width: 300px;
    height: 320px;
    margin-left: 30px;
    border:5px solid #ccc;
    padding: 20px;
}
    var marginLeft=$("#box1").css('marginLeft');
    var borderWith=$("#box1").css('borderColor');
    var paddingLeft=$("#box1").css('paddingLeft');
    var width=$("#box1").css('width');
    var width2=$("#box1").width();
    console.log(marginLeft);//输出带px单位的字符串  30px
    console.log(borderWith);//输出带px单位的字符串  5px
    console.log(borderColor);//输出rgb()的字符串   rgb(204,204,204)
    console.log(paddingLeft);//输出带px单位的字符串  20px
    console.log(width);//输出带px单位的字符串  300px
    console.log(width2);//输出数值 300
var left=$("#box1").offset().left;//数值，子元素的margin+父元素的margin+padding+border
$('#box1').scrollLeft();//数值

即便box1出现横轴滚动条，宽度仍为300px.

js

如果css样式是写在行内的，即元素的style属性中，那么直接通过element.style.marginLeft这样就可以取到。如果样式不在行内（通常情况都不在），通过style是无法取到的。IE和opera支持currentStyle属性，可以取到定义在外部的样式，其他浏览器则需要通过window.getComputedStyle来取.

<div id="box1">a</div>
 #box1{
    width: 300px;
    height: 320px;
    margin-left: 30px;
    border:5px solid #ccc;
    padding: 20px;
}
var ele=document.getElementById("box");
var currentStyle=null;
if(ele.currentStyle){
    currentStyle=ele.currentStyle;
}else{
    currentStyle=window.getComputedStyle(ele);
}
console.log(currentStyle.marginLeft);//30px
console.log(currentStyle.borderStyle);//solid
console.log(currentStyle.borderWidth);//5px
console.log(currentStyle.paddingLeft);//20px
console.log(currentStyle.width);//300px
console.log(ele.offsetWidth);//350，是数值，width+padding+borderwidth
console.log(ele.clientWidth);//340，是数值，width+padding
console.log(ele.scrollWidth);//340，是数值，等于clientWidth

若overflow为scroll，无论box1内容有多少，都会使box1横轴出现滚动条，width宽度变小为283，即滚动条宽度17px。
若内容少，offsetWidth为350，clientWidth为323，scrollWidth为323。
若内容多，offsetWidth为350，clientWidth为323，scrollWidth大于323。
若overflow为hidden，无论box1内容有多少，width宽度300px。
若内容少，offsetWidth为350，clientWidth为340，scrollWidth为340。
若内容多，offsetWidth为350，clientWidth为340，scrollWidth大于340。

综上

scrollWidth:获取对象的滚动宽度 。相当于clientWidth+超出的滚动的部分长度。
clientWidth:获取对象可见内容的宽度，不包括滚动条，不包括边框。
offsetWidth:width+padding+border

其他

clientLeft: 获取对象的border宽度，返回数值。
clientTop:获取对象的border高度，返回数值。
scrollLeft:设置或获取位于对象左边界（margin边界）和对象中目前可见内容的最左端之间的距离，返回数值。
scrollTop:设置或获取位于对象最顶端（margin边界）和对象中可见内容的最顶端之间的距离，返回数值。
offsetLeft:不能对其进行赋值.当前对象到其上级层左边的距离，返回数值。子元素的边框边界到父元素的margin边界之间的距离。子元素的margin+父元素的margin+padding+border。
offsetTop:当前对象到其上级层顶部边的距离。不能对其进行赋值。子元素的margin+父元素的margin+padding+border。

赋值

js中只有scrollLeft和scrollTop能赋值。

ele.scrollLeft=300;

jquery中所有都可以赋值。

var marginLeft=$("#box1").css('marginLeft','500px');
var borderWith=$("#box1").css('borderWidth','10px');
var paddingLeft=$("#box1").css('paddingLeft','10px');
var width=$("#box1").css('width','390px');
//以上返回的都是jquery对象
$('#box1').offset({left:50,top:50})//赋值
$("#box1").width('500');//赋值
$('#box1').scrollLeft('300');

获取浏览器宽度高度

document.body.clientWidth ==> BODY的width+padding
document.body.clientHeight
document.body.offsetWidth ==>BODY的width+padding+border
如果设置body固定宽度px，以上两个都会受影响。如果缩放窗口，以上两个不会受影响。

document.documentElement.clientWidth ==> 可见区域宽度（不包括滚动条）
document.documentElement.clientHeight
document.body.scrollWidth==> 大于等于document.documentElement.clientWidth
如果设置body固定宽度，以上两个不会受影响。如果缩放窗口，以上两个会受影响。

window.screen.width==>屏幕分辨率的宽
window.screen.availWidth==>屏幕可用工作区宽度
如果设置body固定宽度，以上两个不会受影响。如果缩放窗口，以上两个不会受影响。
window.screenTop==>浏览器顶部距离屏幕顶部的宽度
document.body.scrollTop==>body的margin边界距离document顶部边界的距离。
document.documentElement.scrollTop==>body的margin边界距离document顶部边界的距离。

注意

chrome不认识document.documentElement.scrollTop！
document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样：
var sTop=document.body.scrollTop+document.documentElement.scrollTop;

补充1

event.clientX 鼠标相对文档的水平座标
event.clientY 鼠标相对文档的垂直座标
event.offsetX 鼠标相对容器的水平坐标
event.offsetY 鼠标相对容器的垂直坐标
event.screenX 鼠标相对屏幕左边的水平坐标
event.screenY 鼠标相对屏幕顶部的垂直坐标

补充2:jquery

width()内容宽度
height()
innerWidth()内容宽度+padding
innerHeight()
outerWidth()内容宽度+padding+border。注意：不加true参数
outerHeight()
outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）

 console.log($(window).width());//浏览器窗口的宽度，缩放会影响到,相当于document.documentElement.clientWidth
 console.log($(document).width());//body的内容宽度+padding+border+1/2*margin,不受缩放影响
 console.log($(document.body).width());//body的内容宽度，不受缩放影响