html – 如何计算元素的宽度和高度？

发布时间：2020-12-14 22:57:13 所属栏目：资源来源：网络整理

导读：我的理解是, 元素的宽度=(左边框宽度左边填充宽度内容宽度右边距宽度右边框宽度) 元素的高度=(顶部边框高度顶部填充高度内容高度底部填充高度底部边框高度) 下面是相同的图表. 元素的宽度=(10 10 140 10 10)= 180 元素的高度=(10 10 150 10 10)= 190 保证金

我的理解是,

元素的宽度=(左边框宽度左边填充宽度内容宽度右边距宽度右边框宽度)

元素的高度=(顶部边框高度顶部填充高度内容高度底部填充高度底部边框高度)

下面是相同的图表.

enter image description here

元素的宽度=(10 10 140 10 10)= 180

元素的高度=(10 10 150 10 10)= 190

保证金不包括在元素的大小中.

内容与填充仅包含在单击区域中.

以上公式是否正确计算html元素的宽度和高度？

最佳答案

听起来你所描述的是元素的offsetWidth和offsetHeight,它返回元素的“布局宽度和高度”,即所有计算后的最终宽度.

MDN defines offsetWidth以下方式：

The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically,an element’s offsetWidth is a measurement which includes the element borders,the element horizontal padding,the element vertical scrollbar (if present,if rendered) and the element CSS width.

因此,要回答您的问题,元素的最终布局宽度通常是元素边框,水平填充,垂直滚动条宽度和内容宽度的总和.

最终布局高度(offsetHeight)将类似.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!