在检查一个html页面时,我看到DIV元素的“计算”部分和“布局”部分显示了不同的值。为什么会这样。
Computed Section
Q1 -在上面:我在想,100是宽度,0是高度。是这样吗?
Layout Section:
在布局部分,它显示高度和宽度为100 px。
Q2 -这两个部分的值如何不同。哪一方获胜。
Q3 -高度和宽度是暗颜色,这是否意味着这些值是从父元素继承的。
在检查一个html页面时,我看到DIV元素的“计算”部分和“布局”部分显示了不同的值。为什么会这样。
Computed Section
Q1 -在上面:我在想,100是宽度,0是高度。是这样吗?
Layout Section:
在布局部分,它显示高度和宽度为100 px。
Q2 -这两个部分的值如何不同。哪一方获胜。
Q3 -高度和宽度是暗颜色,这是否意味着这些值是从父元素继承的。
1条答案
按热度按时间z6psavjg1#
从图片中我可以看到这个元素的box-sizing属性是“border-box”。布局中的100 px高度表示
content height + padding top + padding bottom = 100px
。从计算部分我们可以看到padding bottom是100 px,所以它的内容高度将被计算为0 px。我们可以推断其CSS源代码如下:希望我的回答是可以理解的。