DOM盒模型

最新推荐文章于 2022-07-19 14:43:41 发布

weixin_33716154

最新推荐文章于 2022-07-19 14:43:41 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017968421

本文深入解析CSS盒模型，包括传统盒模型与CSS3盒模型的区别，以及JavaScript如何获取元素的盒模型属性，如可视区域宽度、边框宽度等，帮助理解布局原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS中的盒模型

传统盒模型
在传统盒子模型中我们说的宽度和高度是指该块元素内容的宽度和高度。
而一个块元素的宽度是
```
    width === width+padding(left/right)+border(left/right);
```
相应的一个块元素的高度是
```
height === height+padding(top/bottom)+border(top/bottom);
```
CSS3中的盒模型
在css3中新增加了盒子模型
.box{
```
   border-sizing: border-box;
```
}
此时块元素的的width和height仅仅是这个块元素的宽度和高度。它包含了这个块元素的padding和border。在这个基础上我们在修改padding或者border块元素的宽度讲不会发生变化。改变的是内容的宽高。

JS中的盒模型

JS中也提供了一些属性和方法用来描述当前元素的样式,主要有以下几种：
备注：通过JS盒子模型属性获取的结果是不带单位的。而且只能是整数（它会自动四舍五入，进行计算）

clientWidth/clientHeight
clientWidth/clientHeight：当前盒子可视区域的宽度和高度
可视区域是指：内容的宽高+padding
```
clientWidth = width + padding(left + right);
clientHeight = height + padding(top + bottom);
```
可视区域和内容是否溢出以及我们是否设置了overflow：hidden没有关系
在我们的项目中，我经常这样使用这两个属性
```
//获取当前页面一屏幕的宽度
W = document.documentElement.clientWidth||document.body.clientWidth;
//获取当前页面一屏幕的高度
H = document.documentElement.clientHeight||document.body.clientHeight;
```
利用这个就可以实现让一个盒子水平和垂直居中。
即实现相对定位，计算出来left和top就可以实现
```
//width和height是盒子的宽高
left = (W-width)/2;
top = (H-height)/2;
```
clientLeft/clientTop
clientLeft:盒子左边框的宽度。
clientTop:盒子上边框的高度。
它俩获取的结果其实就是border-width。
JS中只有clientLeft和clientTop，没有clientRight和clientBottom这两个属性。
offsetWidth/offsetHeight

offsetWidth/offsetHeight就是在clientWidth和clientHeight的基础上加上盒子的边框。
即：
```
offsetWidth === clientWidth + border(left/right);
offsetHeight === clientHeight + border(top/bottom)
```
和内容是否溢出没有关系。
在我们的项目中，如果想获取一个盒子的宽度和高度，我们一般用offsetWidth（而不是clientWidth）和offsetHeight，因为border也算是当前盒子的一部分。

scrollWwidth/scrollHeight

1) 没有内容溢出情况下：

   获取的结果和clientWidth/clientHeight是一样的

2) 有内容溢出的情况下:

 真实内容的宽度和高度（包含溢出的内容），在加上左边的padding 和上边的padding 值。

    //有横向滚动条时，获取当前页面的真实宽度
    document.documentElement.scrollWidth||document.body.scrollWidth;
    //有纵向滚动条时，获取当前页面的真实高度
    document.documentElement.scrollHeight||document.body.scrollHeight;

window.getComputedStyle/currentStyle

在JS中获取元素具体的样式值：例如获取某个元素的paddingLeft值。
方法一：
currentElement.style.XXX
例如：
```
box.style.paddingLeft
```
注意这个方法是获取当前元素的行内样式。只能获取当前元素的行内样式，内嵌或者外联样式是不能获取的。

方法二：
通过 window.getComputedStyle/currentStyle可以获取所有经过浏览器计算过的样式。

或者当前元素的paddingLeft值，使用例子：
```
window.getComputedStyle(box, null).paddingLeft
//或者下面这个方法，box是当前元素，第二个参数是当前元素的伪类，一般为
window.getComputedStyle(box, null)['paddingLeft']
```
window.getComputedStyle在IE6~8中不兼容。不兼容的原因是因为在IE6~8下，window对象没有getComputedStyle属性发放导致的。所以在IE6~8中我们使用currentStyle属性。备注currentStyle只有IE中才有，其他浏览器中都没有这个属性。使用方法例子：
```
box.currentStyle['paddingLeft'];
//或者
box.currentStyle.paddingLeft
```