javascript - 带有 `width: 100%` 的样式 header 而不使用 `position` 属性

Question

这是我的 HTML 结构:

div {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background-color: gray;
  color: white;
  text-align: center;
}

<div>header</div>

我可以制作完全相同的东西(如上面代码的结果) 没有 position 属性吗？

Answer 1

当然，一定要设置margin: 0;和 padding: 0;在你的 html和 body元素也是如此，因为大多数浏览器样式表为这些属性设置了非零默认值:

div {
  width: 100%;
  background-color: gray;
  color: white;
  text-align: center;
}

html, body {
  margin: 0;
  padding: 0;
}

<div>header</div>