盒子模型

一.概念

1.内容的宽度和高度

我们设置的width/height这两个样式就是内容的宽和高；

● 如果没有设置height值，容器的高度会根据里面内容自适应，这样获取的值就是真实内容的高；

● 如果设置了固定的高度，不管内容是多还是少，其实我们内容的高度值的都是设定的那个值。

2.真实内容的宽度和高度

代指的是实际内容的宽高（和我们设置的height没有必然的联系），

如我设置高度为200,如果内容有溢 出，

那么真实内容的高度是要把溢出内容的高度也加进来的。

3.js盒子模型属性

在JS中通过相关的属性可以获取(设置)元素的样式信息,

这些属性就是盒子模型属性（基本上都是有关于样式的）

client系列
      top
      left
      width  
      height

scroll系列
      top
      left
      width
      height
     
offset系列
      top
      left
      width
      height
      parent

二.client系列

1.clientWidth & clientHeight

• 获取当前元素可视区域的宽高（内容的宽高+左右/上下PADDING）
  和内容是否有溢出无关(即不包含border值)
• 如果设置了box-sizing:border-box; 则clientWidth/clientHeight =容器宽/高- border

2.clientTop/Left

• 获取(上/左)边框的宽度

3.总结

image.png

三.scroll系列

1.scrollWidth & scrollHeight

是当前页面的真实宽/高（所有屏加起来的宽/高），但是是一个约等于的值`

• 容器中内容没有溢出的情况下：和我们的clientWidth/clientHeight一模一样

• 如果容器中内容有溢出，获取的结果如下规则：

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

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

获取到的结果都是“约等于”的值，因为：

• 同一个浏览器，我们是否设置overflow="hidden"，对于最终的结果是有影响的（滚动条也占据宽度会影响）；

• 在不同的浏览器中我们获取到的结果也是不相同的

//获取整个页面真实的高度
document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

#### 2.scrollLeft&scrollTop（可读写属性）

>**滚动条卷去的宽度/高度** 
>
>1.之前我们学习的js盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只读”属性->只能通过属性获取值，不能通过属性修改元素的样式
>2.scrollTop/scrollLeft：滚动条卷曲的高度/宽度(这两个属性是唯一“可读写”属性)

####  3.边界值

```javascript
min =0;
max = 整个高度的scrollHeight - 一屏幕高度clientHeight

四.offset系列

1.offsetWidth & offsetHeight

• 在client的基础上加上border（和内容是否溢出也没有关系）

2.offsetParent

• 当前元素的父级参照物，在同一个平面中，最外层的元素是里面所有元素的父级参照物（和html层级结构没有必然的联系）

• 一般来说一个页面中所有元素的父级参照物都是body

 

     

 

 
var outer = document.getElementById("outer"),
inner = document.getElementById("inner"),
center = document.getElementById("center");

console.log(center.offsetParent);    //body
console.log(inner.offsetParent); //body
console.log(outer.offsetParent); //body
console.log(document.body.offsetParent); //null

• 想要改变父级参照物需要通过position定位来进行改变:absolute,relative,fixed中任意一个值都可以把父级参照物进行修改

outer.style.position = "relative";
inner.style.position = "relative";
console.log(center.offsetParent);    //inner
console.log(inner.offsetParent); //outer
console.log(outer.offsetParent); //body

3.offsetLeft/offsetTop

• 当前元素（外边框）距离其父级参照物（内边框）的偏移距离

console.log(center.offsetLeft);  //距离body左偏移距离
console.log(inner.offsetLeft);   //距离body左偏移距离
console.log(outer.offsetLeft);   //距离body左偏移距离

outer.style.position = "relative";
inner.style.position = "relative";
console.log(center.offsetLeft);  //距离inner左偏移距离

• 无论你的父参照物是谁，我就想获取其距离BODY的偏移值

image.png

[图片上传失败...(image-326582-1607906039428)]

五.总结

• 我们通过以上这些属性值获取的结果永远不可能出现小数，都是整数；

浏览器获取结果的时候，会在原来真实结果的基础上进行四舍五入。

• 关于浏览器本身盒子的模型信息

clientWidth & clientHeight: 是当前浏览器可视窗口的宽/高（一屏幕的宽/高）

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

• 宽和高的总结

1.clientWidth & clientHeight：获取当前元素可视区域的宽高（内容的宽高+左右/上下PADDING）
  //获取当前页面一屏幕(可视区域)的宽度和高度
   document.documentElement.clientWidth || document.body.clientWidth
   document.documentElement.clientHeight || document.body.clientHeight

2.offsetWidth & offsetHeight：在client的基础上加上border（和内容是否溢出也没有关系）

3.scrollWidth & scrollHeight：真实内容的宽高（需要把溢出的内容也算上）+ 左/上PADDING
 
  获取当前页面的真实宽高（包含溢出的部分）
     document.documentElement.scrollWidth || document.body.scrollWidth
     document.documentElement.scrollHeight || document.body.scrollHeight