Chrome 在检查一个html页面时,我看到DIV元素的“计算”部分和“布局”部分显示了不同的值,为什么会这样呢?

wr98u20j  于 2023-05-27  发布在  Go
关注(0)|答案(1)|浏览(157)

在检查一个html页面时,我看到DIV元素的“计算”部分和“布局”部分显示了不同的值。为什么会这样。
Computed Section
Q1 -在上面:我在想,100是宽度,0是高度。是这样吗?
Layout Section:
在布局部分,它显示高度和宽度为100 px。
Q2 -这两个部分的值如何不同。哪一方获胜。
Q3 -高度和宽度是暗颜色,这是否意味着这些值是从父元素继承的。

z6psavjg

z6psavjg1#

从图片中我可以看到这个元素的box-sizing属性是“border-box”。布局中的100 px高度表示content height + padding top + padding bottom = 100px。从计算部分我们可以看到padding bottom是100 px,所以它的内容高度将被计算为0 px。我们可以推断其CSS源代码如下:

div {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  padding-bottom: 100px;
}

希望我的回答是可以理解的。

相关问题