html - 为什么页眉不以正文边距居中？

Question

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

            * {
                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>

为什么标题没有附加到左视口(viewport)边缘？

Answer 1

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

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

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

添加 left: 0，它的行为将如您所愿。