Question

#wrapper {
        margin: 0 auto;
        max-width: 1020px;
        width: 98%;
        background-color: #FEFBE8;
        border: 2px solid #878E63;
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(12,3,25,0.8);
}

我在线学习本教程，它有一个带有id包装器的div元素，它包装了正文中包含的所有内容。所以：

<body>
<div id="wrapper">
...
</div>
</body>

这是一个制作响应式网站的教程。我有点困惑为什么包装器的css包括max-width：1020px AND 宽度：98％。这就是说id包装器的div元素将是1020px的98％？

Answer 1

width属性是相对于浏览器窗口的宽度，但是通过设置最大值，这可以确保宽度不会超过1020px（在这种情况下），即使您的浏览器窗口拉伸到1020px以上

Answer 2

max-width - 元素可达到的最大宽度
width元素的宽度

您的代码表明#wrapper是视口的98％，但它不应超过1080px。如果98％的窗口宽度大于1020px，#wrapper将不会更宽！

如果您不理解，请发表评论:)

HTML宽度百分比

2 个答案: