为什么 header 没有以 body 边距居中？

Question

下面，我固定了一个 header 到顶部，设置 width: 100% 并对 margin: 10% 的 body 元素应用了边距。我希望 header 保持在视口的 100% 宽度，但它现在有一个左边距但到达右侧视口的末端。

            * {
                box-sizing: border-box;
            }
            
            
        
            header {
                position: fixed;
                background-color: #59b1ff;
                top: 0;
                height: 20px;
                width: 100%;
            }
            
            body {
                margin: 20%;
            }
            
            div {
                border: 1px solid grey;
            }

<header>Header</header>

<main>
<div>Div</div>
</main>

为什么 header 没有附加到左视口边缘？

Answer 1

Why is the header not attached to the left viewport edge?

因为您没有指定您希望其左边缘所在的位置。

您基本上将 left 保留为默认值 auto，因此它占据了此元素 在流中 的自然位置，如果它不是的话定位，考虑。

添加 left: 0，它会像您希望的那样运行。

Answer 2

只需添加left: 0

* {
  box-sizing: border-box;
}

header {
  position: fixed;
  background-color: #59b1ff;
  top: 0;
  left: 0;
  height: 20px;
  width: 100%;
}

body {
  margin: 20%;
}

div {
  border: 1px solid grey;
}

<header>Header</header>

<main>
<div>Div</div>
</main>

Answer 3

实际上问题出在您的 header 元素上。无论何时使用固定或绝对定位，您还必须在固定元素中指定左、右或上（根据您的需要）。

            * {
                box-sizing: border-box;
            }
            
            
        
            header {
                position: fixed;
                background-color: #59b1ff;
                top: 0;
                height: 20px;
                width: 100%;
                left:0;  /*Added this*/
                right:0; /*Added this*/
            }
            
            body {
                margin: 20%;
            }
            
            div {
                border: 1px solid grey;
            }

<header>Header</header>

<main>
<div>Div</div>
</main>

Answer 4

尝试添加这些规则：

header {
  position: fixed;
  background-color: #59b1ff;
  top: 0;
  left: 0; /* stick the header to the viewport's left */
  height: 20px;
  width: 100%;
}

body {
  position: relative; /* allows the header to be positioned relative to the body */
  margin: 20%;
}

Answer 5

只需设置左侧属性 zero.you 将其设置为默认值，它将占据此元素在流中的自然位置。

为什么 header 没有以 body 边距居中？

Why is the header not centered with body margin?

html

css

viewport