JS的盒子模型

一。JS盒子模型指的是通过JS中提供的一系列的属性和方法，获取页面中元素的样式信息值

<script type="text/javascript">  
    var box = document.getElementById("box");  
    console.dir(box);  
</script>

#box（有很多自己的私有属性）-> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> Node.prototype -> 

EventTarget.prototype -> Object.prototype

以下面这个盒子作为例子了解一下JS中的盒子模型：

内容的宽度和高度：我们设置的 width / height 这两个样式就是内容的宽和高；如果没有设置height的值，容器的高度会更具里面内容多少自己进行适应，这样获取的值就是真实内容的高；如果固定的高度了，无论内容的多了还是少了，其实我们的内容的高度都是设定的那个值

真实内容的宽度和高度：这个代指的是实际内容的宽高（和我们设置的height没有必然的联系），例如：我们设置的高度为200px，如果内容有溢出，那么真实内容的高度就是把溢出内容的高度也要加进来的

（当前元素的几个私有的属性）

1.client系列

-> clientWidth / clientHeight : 内容的宽度 /  高度 + 左右 / 上下填充padding

-> clientLeft / clientTop : 左 边框的宽度 / 上边框的高度   （border [ Left / Top ] Width）

2.offset系列

-> offsetWidth / offsetHeight :  clientWidth / clientHeight  + 左右 / 上下边框border

-> offsetParent：当前元素的富集参照物

-> offsetLeft / offsetTop：当前元素的外边框距离富集参照物的内边框的偏移量

3.scroll系列

-> scrollWidth / scrollHeight ：和我们的clientWidth / clientHeight 一模一样（前提是：容器中的内容没有溢出的情况下）

-> 如果容器中的内容有溢出，我们获取的结果是如下规则：

scrollWidth ：真实内容的宽度（包含溢出） + 左填充padding-left

scrollHeight：真实内容的高度（包含溢出） + 上填充padding-top

-> 获取到的结果都是“约等于”的值，因为：同一个浏览器，我们是否设置overflow: hidden; 对于最终的结果石油影响的，在不同的浏览器中我们取到的结果也是不同的

-> scrollLeft / scrollTop：滚动条卷去的宽度 /  高度

二。关于JS合作司模型属性取值的问题

我们通过这13个属性值获取到的结果永远不可能出现小数，都是整数；浏览器获取结果的时候，在原来真实结果的基础上进行四舍五入

三。关于操作浏览器本身的盒子模型信息

-> clientWidth / clientHeight 是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）

-> scrollWidth / scrollHeight 是当前页面的真实宽度和高度（所有屏加起来的宽度和高度，但是是一个约等于的值）

-> 我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要兼容的话，就需要写两套

document.documentElement[attr] || document.body[attr]  -> 必须document.documentElement在前面

-> 例如：

[获取]    

document.documentElement.clientWidth || document.body.clientWidth

[设置也需要写两套]

document.documentElement.clientWidth = 0；

document.body.clientWidth = 0；

为了方便，编写一个关于操作浏览器盒子模型的方法win

如果只传递了attr没有传递value，默认的意思就是“获取”

如果两个参数都传递了，意思就是“设置”

不严谨的说，这就是有关于“类的重载”，同一个方法，通过传递参数的不同实现了不同的功能

<script type="text/javascript">  
    var box = document.getElementById("box");  
    console.dir(box);  
    function win(attr,value) {  
        if(typeof value === "undefined"){//->没有传递value值=“获取”  
            return document.documentElement[attr] || document.body[attr];  
        }  
        //“设置”  
        document.documentElement[attr] = value;  
        document.body[attr] = value;  
    }  
</script>