🔰box models
browser ⟩ DOM ⟩ type ⟩ Element ⟩ boxes
.paddingBox = content + padding
.borderBox = content + padding + border (+ scrollbars, if present)
.boundingBox - similar to .borderBox.
.scrollBox = content + padding + overflow
.borderBox = content + padding + border (+ scrollbars, if present)
⭐️ Note: .offsetParent returns null in the following situations:
the element (or its parent) has
display:none.the element has
position:fixed( Firefox returns<body>).the element is
<html>or<body>.
.boundingBox is similar to box models
if box-sizing: box-sizing： size = (width, height)
.paddingBox = content + padding
position: (.clientTop, .clientLeft) in .borderBox
for inline elements (like <i>, <code>, <span>), they all return
0.
size: (.clientWidth, .clientHeight)
for inline elements and elements with no CSS(❓), they all return zero.
mouse event / touch event - (.clientX, .clientY), (.pageX, .pageY)
Last updated
Was this helpful?