盒模型就是用来在浏览器中展示一个元素的基础模型，其实就是一个矩形。只不过它是一个 4 层模型，包含了 content、padding、border、margin。
我们来写一个极其简单的 div 来说明一下盒模型
//html
<div class="content-box border-style padding-style margin-style">
hello world
</div>
//css
.content-box{height: 100px;width: 200px;background: lightblue;}
.border-style{border: 20px solid lightcoral;}
.padding-style{padding: 10px}
.margin-style{margin: 30px auto;}
使用 chrome 开发者工具，可以看到一个由盒模型展示的 div
正常显示：
dev tool 查看：
有一个 4 层的模型，从外到里依次是 margin、border、padding、content。这里的 content 指的就是第二张图蓝色部分的内容块的大小。
在 css 中，我们将 background 设置为 light-blue 。对比两张图，我们会发现
- backgroud 设置的背景色，包含了 content 和 padding
- 也就是说第一张图的蓝色部分，对应于，第二张盒模型图最内圈的蓝色部分加绿色部分
此外，实际被计算为元素只读属性 clientHeight 的只包括 padding、content 部分
document.getElementsByClassName('content-box')[0].clientHeight //120
而实际被计算为元素只读属性 offsetHeight 的包括了 padding、content 、border部分
document.getElementsByClassName('content-box')[0].clientHeight //160
如果你需要获得当前元素的高度信息，建议使用clientHeight\offsetHeight。这两个属性是在 css 渲染计算之后得到的值，也就是他们是当前元素的真实高度。
如果用 style.height 来显示元素高度呢 ？
document.getElements.ByClassName('content-box')[0].style.height //""
What ?!!!
结果是 ""，有点让人费解。
原来是只有在设置内联属性 height 时，style.height 才有值，并且这个 height 值只是 content 部分的高度
<div class="content-box border-style padding-style margin-style" style="height:50px">
// "50px"
不用使用内联属性，偏要用使用 style.height 来获得实际呢？
如果偏要这样，也是有办法的
getComputedStyle(document.getElementsByClassName('content-box')[0]).height
// "100px"
这里的 getComputeStyle 就是元素 css 经渲染计算之后的结果，所以也可获得真实的 height 属性
参考
[1] Why browser is returning empty string on style.height ? How to get actual height of an element?
网友评论