jquery dimensions understanding

by roskoshinsky

HTML

<div class="container" >
<div class="yellow box" id="box1" style="left:0px; top:0px;" ></div>
<div class="green box" id="box2" style="left:100px; top:100px;" ></div>
</div>

CSS

html {width:100%; height:100%;}
html * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:0px; margin:0px; border:0px; font-size:0px; font-weight:0; font-family:Helvetica, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {width:100%; height:100%;}

.container{position:relative; width:100%; height:100%;}
.box{position:absolute; width:100px; height:100px; border:1px solid black;}
.yellow{background:yellow;}
.green{background:green;}

JavaScript

String.prototype.toInt = function(iBase){
    return parseInt(this, iBase || 10);
}; // toInt

console.clear();

$box1 = $("#box1");
$box2 = $("#box2");

//$box1.css("width", "100"); $box1.css("height", "100");
$box1.outerWidth(100); $box1.outerHeight(100);

console.log("box1 outer " + $box1.outerWidth() + ", " + $box1.outerHeight());
console.log("box1 method " + $box2.width() + ", " + $box1.height());
console.log("box1 css " + $box2.css("width") + ", " + $box1.css("height"));

console.log("end");