日常记录：区分不同box-sizing下jq与原生js获取宽度和绝对定位left值的差异性

(默认) box-sizing: content-box;

//Jq
$('#ele').width();      //盒子content宽度
$('#ele').innerWidth();      //盒子content + padding
$('#ele').outerWidth();      //盒子content + padding + border
$('#ele').outerWidth(true);      //盒子content + padding + border + margin
//js
$('#ele')[0].offsetWidth   //盒子content宽度

box-sizing: border-box

$('#ele').width();      //盒子content宽度
$('#ele').innerWidth();      //盒子content + padding
$('#ele').outerWidth();      //盒子content + padding + border
$('#ele').outerWidth(true);      //盒子content + padding + border + margin
//js
$('#ele')[0].offsetWidth   //盒子content + padding + border宽度

对于获取绝对定位left值而言

//jQ
$('#ele').position().left        //margin处开始计算（不受margin影响）
//js
$('#ele')[0].offsetLeft        //border处开始计算（随margin变化而变化）
//假如设置left: 0, margin: 20
//则 jq获取值为 0， js为20 
//赋值时两效果一样，但获取的内容不一样
$('#ele')[0].style.left = '0px'
$('#ele').css('left', '0px')

总体而言，Jq的取值方式没有变化，原生js则需要注意border和padding问题；同理，对应的赋值问题也需要注意；对于position定位，jQ的left值不受margin值影响，及赋值多少，获取就是多少，而原生js获取的值等于赋值时的值加上margin-left.