Html 填充时绝对定位的div太宽：%

我有两个div，一个

位置：static

和一个

位置：absolute

。尽管具有相同的宽度和填充值，但绝对定位的div宽约17px。仅当我将水平填充指定为百分比时，才会发生这种情况。如何在不删除%填充的情况下使这些div具有相同的宽度

.foo{
边框：2件纯蓝；
背景：粉红色；
宽度：200px；
填充：20px20%；
}
傅先生：第n名儿童（3）{
边框颜色：红色；
位置：绝对位置；
顶部：96px；
}

---

我知道如何解决这个问题：

body {
  width: 100%;
}

---

我只是不能100%确定为什么会发生这种情况。它可能与绝对位置元素不共享相同的包含元素（body vs html）有关，这就是使用百分比的填充的基础。

我知道如何解决这个问题：

body {
  width: 100%;
}

---

我只是不能100%确定为什么会发生这种情况。这可能与绝对位置元素不共享相同的包含元素有关（body vs html），这就是使用百分比填充的基础。

实际上，您面临的问题是一个非常常见的问题：body上的默认边距

通过添加

边距：0

对于

主体

，问题已解决。填充的原因：20px 20%对于元素的行为不同是因为百分比值基于父元素的宽度-对于静态定位的元素，这将减少默认的边距。但是，对于绝对定位的元素，主体上的这个边距将被忽略（

html

而不是

body

被视为其父元素，它没有边距），并且20%将是一个较大的数字

这也是为什么您必须使用

top:96px

而不是绝对定位元素的

top:88px

（填充为40px，边框为8px）-默认边距向下推顶两个元素

这是您的代码，经过相应调整：

正文{
保证金：0；
}
傅先生{
边框：2件纯蓝；
背景：粉红色；
宽度：200px；
填充：20px20%；
}
.foo:n个孩子（3）{
边框颜色：红色；
位置：绝对位置；
顶部：88px；
}

---

实际上，您面临的问题很常见：正文上的默认边距

通过添加

边距：0

对于

主体

，问题已解决。填充的原因：20px 20%对于元素的行为不同是因为百分比值基于父元素的宽度-对于静态定位的元素，这将减少默认的边距。但是，对于绝对定位的元素，主体上的这个边距将被忽略（

html

而不是

body

被视为其父元素，它没有边距），并且20%将是一个较大的数字

这也是为什么您必须使用

top:96px

而不是绝对定位元素的

top:88px

（填充为40px，边框为8px）-默认边距向下推顶两个元素

这是您的代码，经过相应调整：

正文{
保证金：0；
}
傅先生{
边框：2件纯蓝；
背景：粉红色；
宽度：200px；
填充：20px20%；
}
.foo:n个孩子（3）{
边框颜色：红色；
位置：绝对位置；
顶部：88px；
}

---

这是因为百分比是相对于的，在绝对情况下会有所不同

对于in-flow元素，包含块由

主体

元素建立，默认情况下该元素有一些边距，因此它比视口窄

对于绝对定位的元素，包含块由最近定位的祖先建立。因为没有，所以它是由视口建立的

解决方案是定位

主体

，以便为绝对定位的元素建立包含块：

正文{
位置：相对位置；
}

正文{
位置：相对；/*为绝对定位的子体建立包含块*/
}
傅先生{
边框：2件纯蓝；
背景：粉红色；
宽度：200px；
填充：20px20%；
}
.foo:n个孩子（3）{
边框颜色：红色；
位置：绝对位置；
顶部：96px；
}

---

这是因为百分比是相对于的，在绝对情况下会有所不同

对于in-flow元素，包含块由

主体

元素建立，默认情况下该元素有一些边距，因此它比视口窄

对于绝对定位的元素，包含块由最近定位的祖先建立。因为没有，所以它是由视口建立的

解决方案是定位

主体

，以便为绝对定位的元素建立包含块：

正文{
位置：相对位置；
}

正文{
位置：相对；/*为绝对定位的子体建立包含块*/
}
傅先生{
边框：2件纯蓝；
背景：粉红色；
宽度：200px；
填充：20px20%；
}
.foo:n个孩子（3）{
边框颜色：红色；
位置：绝对位置；
顶部：96px；
}

是的。通过执行

body{margin:0}

也可以看到类似的效果。浏览器默认为

body{margin:8}

。是的。通过执行

body{margin:0}

也可以看到类似的效果。浏览器的默认设置是

body{margin:8}

。我认为您的基本文件中应该有一个规范化

css

片段。我认为您的基本文件中应该有一个normalize

css

片段。