1.元素尺寸的相关概念
下面的内容会牵扯到各类包含“尺寸”字样的名词,为了大家在阅读的时候不产生困扰,
这里专门把相关概念梳理一下。
我们这里的各类“尺寸”命名和对应的盒子类型全部参考自 jQuery 中与尺寸相关 API 的名称。
• 元素尺寸:对应 jQuery 中的$().width()和$().height()方法,包括 padding
和 border,也就是元素的 border box 的尺寸。在原生的 DOM API 中写作 offsetWidth
和 offsetHeight,所以,有时候也成为“元素偏移尺寸”。
• 元素内部尺寸:对应 jQuery 中的$().innerWidth()和$().innerHeight()方法,
表示元素的内部区域尺寸,包括 padding 但不包括 border,也就是元素的 padding
box 的尺寸。在原生的 DOM API 中写作 clientWidth 和 clientHeight,所以,
有时候也称为“元素可视尺寸”。
• 元素外部尺寸:对应 jQuery 中的$().outerWidth(true)和$().outerHeight
(true)方法,表示元素的外部尺寸,不仅包括 padding 和 border,还包括 margin,
也就是元素的 margin box 的尺寸。没有相对应的原生的 DOM API。
“外部尺寸”有个很不一样的特性,就是尺寸的大小有可能是负数,没错,负尺寸。这和我们现
实世界对尺寸的认知明显冲突了,因为现实世界没有什么物体的尺寸是负的。所以,我总是把“外部
尺寸”理解为“元素占据的空间尺寸”,把概念从“尺寸”转换到 “空间”,这时候就容易理解多了。
元素的宽高问题
最新推荐文章于 2021-12-25 10:24:06 发布