JS 盒子模型

盒子模型

内容的宽度和高度:
我们设置的width/ height这两个样式就是内容的高和宽, 如果没有设置height, 容器的高度会根据里面内容自己进行适应, 这样获取的值就是真实的内容; 如果设置固定的高度了, 不管内容是多了还是少了, 其实我们内容的高度指的都是设定的那个值;

真实内容的宽度和高度:
这个代指的是实际内容的宽高(和我们设置的height没有必然的联系), 例如: 我设置高度为200px, 如果内容溢出, 那么真实内容的高度还要加上我们溢出的高度

client

获取当前元素可视区域的宽度

clientWidth / clientHeight:
内容的宽度/高度 + 左右/上下填充(和内容溢出没有关系)

clientLeft: 左边框的宽度, clientTop:
上边框的高度( border[Left/Top]Width )

offset

offsetWidth/ offsetHeight:
在client的基础上加上border

offsetTop/ offsetLeft:
获取当前盒子距离其父级参照物的偏移量(上偏移/ 左偏移) 当前盒子的外边框开始 ~ 父级参照物的内边框

offsetParent:
当前盒子的父级参照物
"参照物":
同一个平面中, 元素的父级参照物和结构没有必然联系, 默认他们的父级参照物都是BODY(当前平面最外层的盒子)BODY的父级参照物是NULL

scroll

scrollWidth/ scrollHeight:
容器中的内容没有溢出时: 和我们的clientWidth/ ClientHeight的值一样.
如果容器中的内容有溢出时: 我们获取的结果是如下规则:
scrollWidth:
真实内容的宽度(包含溢出) + 左填充
scrollHeight:
真实内容的宽度(包含移除) + 上填充

获取的值都是约等于值
因为: 同一个浏览器, 我们是否设置overflow="hidden"对于最终的结果是有影响的, 在不同的浏览器中我们获取到的结果也是不相同的.

scrollLeft/ scrolTop:
滚动条卷去的宽度/ 高度

JS盒子模型

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

关于操作浏览器本身盒子模型

scrollWidth/ scrollHeight 是当前页面的真实宽度/ 高度, (所有屏加起来的宽度和高度但是是一个越等于的值)
我们不管那些属性, 也不管是什么浏览器, 也不管是获取还是设置, 想要都兼容的话, 需要写两套
document.documentElement[attr] || document.body[attr];
必须document.documentElement在前
设置, 也要写两套
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

兼容写法

function win(attr, value){
    if(typeof value === "undefined"){
        return documentElement[attr] || document.body[attr];
    }
    document.documentElement[attr] = value
    document.body[attr] = value
}