为什么标题不以身体边缘为中心？

Question

下面,我将标题固定在顶部,设置width: 100%并应用了body元素的边距margin: 10%.我希望标题保持在视口的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>

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

Answer 1

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

因为您没有指定左边缘的位置.

你基本上留left在默认的auto,所以它需要的自然位置这个元素将在流,如果没有定位,考虑在内.

添加left: 0,它会表现得像你想要的那样.