🌏web.dev
⚙️tools
- 🔰tooltip
- 🔰syntax highlighting
🔰HTML
🔰CSS
🍒JS
🔰web component
🌐browser
🔰React
Server
- HTTP status code
附錄

Powered by GitBook

On this page

Was this helpful?

🌐browser

🔰DOM

🌿DOM types

📘Element

🔰box models

Previousattributes vs. properties NextElement+boxes

Last updated 6 days ago

browser ⟩ DOM ⟩ type ⟩ Element ⟩ boxes

.paddingBox = content + padding
.borderBox = content + padding + border (+ scrollbars, if present)
.boundingBox - similar to .borderBox.
.scrollBox = content + padding + overflow
viewport

👔 Element+boxes

viewport

.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 #border-box

in the standard box model： size = content(width, height) + padding + border.
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.

CSS ⟩ box model
.scrollBox
Window
viewport
document size
elem.position()
mouse event / touch event - (.clientX, .clientY), (.pageX, .pageY)
Rect

HTML vs Body: How to Set Width and Height for Full Page Size

Element ⟩
- .clientWidth, .clientHeight
- .scrollLeft, .scrollTop, .scrollTo(), .scrollWidth, .scrollHeight
Window ⟩
- .scrollX, .scrollY

Drawing

Drawing

Drawing

Drawing

Drawing

Drawing