提问人：CodeBot 提问时间：5/24/2023 最后编辑：CodeBot 更新时间：5/24/2023 访问量：34
在检查 html 页面时，我看到 DIV 元素的“计算”部分和“布局”部分显示不同的值。为什么会这样？
On inspecting a html page I see different values being shown in "Computed" section and "Layout" section for a DIV element. Why is it so?
问：
在检查 html 页面时，我看到 DIV 元素的“计算”部分和“布局”部分显示不同的值。为什么会这样。
Q1 - 在上面：我在想，100 是宽度，0 是高度。是吗？
在布局部分，它将高度和宽度都显示为 100px。
问题 2 - 这两个部分的值有何不同。哪个赢了。
Q3 - 高度和宽度是暗淡的颜色，这是否意味着这些值是从父元素继承的。
答：
0赞
Liying Chen
5/24/2023
#1
我可以看到这个元素的 box-sizing 属性是图片中的“border-box”。而布局中 100px 的高度意味着 .从计算的部分我们可以看到填充底部是 100px，所以它的内容高度将被计算成 0px。
我们可以推断它的 CSS 源代码是这样的：content height + padding top + padding bottom = 100px
div {
width: 100px;
height: 100px;
box-sizing: border-box;
padding-bottom: 100px;
}
希望我的答案是可以理解的。
评论