小结一下~

前言

offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到，如果小伙伴们没有经常使用的话，很容易把这些属性搞混，今天就来理一理这三个属性分别代表什么？

1.盒子模型

介绍这三个属性之前先来了解一下CSS盒子模型，因为面试中如果遇到这道题，面试官通常也是想要考察你盒子模型的相关知识。

盒子模型顾名思义就是盒子的意思，盒子里面可以装很多东西。比如我们的div就可以比作一个盒子，那么组成一个完整的盒子主要包括下面几个部分：

width
height
padding
border
margin
box-sizing（用来区别正常盒模型和怪异盒子模型）

一个盒子大概由上面一些属性组成，盒子模型又分为了正常和模型和怪异和模型。

1.1 正常盒模型

我们借用一张图就可以很清楚的知道什么是正常盒模型：

通过上图可以看出：宽度就是内容的宽度。当我们修改padding或者border属性时，盒子的总宽度会改变。

1.2 怪异盒子模型

同样，我们借助一张图来理解怪异盒子模型：

2.offsetHeight

简单总结为一句话：获取元素的高度，包含padding和border。

需要注意的是，如果我们的盒子是正常盒子，那么高度只有内容高度，所以通常我们需要将盒子模型改为怪异盒子模型，使用box-sizing属性。

<head><style>.box1 {width: 100px;height: 100px;padding: 20px;margin: 30px;border: 5px solid yellow;background-color: #ccc;}</style>
</head>
<body><div class="box1">盒子1</div>
</body>
<script>const box1 = document.getElementsByClassName("box1")[0];console.info("盒子1的offsetHeight",box1.offsetHeight)
</script>

结果解释：

最终offsetHeight = 150px，我们说过offsetHeight是获取元素的高度，上面代码中我们元素的高度设置为100px，但是offsetHeight却是150px，这就是因为正常盒子模型的宽度等于内容宽度的原因，实际上box1占据的宽度要更宽。

实际上offsetHeight = 100 + 20(padding) + 20(padding) + 5(border) + 5(border)。

在实际项目中，为了获得更准确，或者最真实的元素宽度，我们需要把正常盒子模型转为怪异盒子模型，添加属性box-sizing:border-box.。这时候打印出来offsetHeight=100

3.clientHeight

简单总结为一句话：获取元素的高度，包含padding。

这个属性和offsetHeight类似，唯一的区别就是它不包含border，

总结：clientHeight = content + padding

4.scrollHeight

简单总结为一句话：获取元素的高度，也不包含padding。

这个属性和clientHeight类似，都不包含border，但是scrollHeight的高度需要更具内容的实际尺寸决定

.box3 {width: 100px;height: 100px;padding: 20px;margin: 30px;border: 5px solid yellow;box-sizing: border-box;background-color: #ccc;overflow: auto;
}
<div class="box3"><div style="height: 300px;">盒子3</div>
</div>

上段代码中我们在box3中添加了一个div，并且设置高度300px，此时的scrollHeight输出340px，也就代表我们的scrollHeight是需要根据实际的内容尺寸计算的。

总结：scrollHeight = 实际内容尺寸+ padding

总结

这三个属性虽然都很类似，但是每一个又有一些不一样的地方，总结起来就下面三点：

offsetHeight = 内容高度 + padding + border
clientheight = 内容高度 + padding
scrollHeight = 内容实际尺寸 + padding

从CSS盒子模型说到offsetHeight、scrollHeight、clientHeight的区别相关推荐

CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
CSS盒子模型一.盒子模型二. 块级元素与行级元素✪✪✪ 块级元素行内元素转化三.导航栏的实现一.盒子模型盒子是页面内容的容器,通过盒子的堆叠.嵌套能实现网页布局各属性: 大小(wid ...
php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型一.什么是CSS? CSS(Cascading Style S ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...
[css] 说说你对css盒子模型的理解
[css] 说说你对css盒子模型的理解 css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子.比如:display: inline-block, 则它的外在的盒子就是i ...
CSS:盒子模型和清除float浮动的三种常用方法
目录一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
css盒子模型_css的盒子模型是什么
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. css盒子模型又称为框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(bor ...

从CSS盒子模型说到offsetHeight、scrollHeight、clientHeight的区别

前言