HTML 宽度百分比

标签 html css

#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 width: 98%。那么这是不是说带有 id 包装器的 div 元素将是 1020px 的 98% 呢?

最佳答案

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

您的代码表明#wrapper 占视口(viewport)的 98%,但宽度不应超过 1080px。如果 98% 的窗口宽度大于 1020px,#wrapper 将不会变宽!

不懂的请评论:)

关于HTML 宽度百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34112981/

相关文章:

javascript - 使字符串驼峰式命名的函数

javascript - 浏览器与 insertUnorderedList 的差异

html - 使用@fontface 更改 Jquery UI 字体

css - 在 IE/Edge 字体支持中测试哪个特性?

css - css 中的单个固定位置剪切区域仅影响图像

javascript - 未捕获的类型错误 : Cannot read property 'src' of undefined at displayFull

javascript - execCommand中“粘贴为纯文本”的JavaScript技巧

javascript - HTML,是否可以从 "required"属性更改验证消息位置?

javascript - 使用 jquery 加载页面时出现的小问题

css - 线性渐变 Firefox 支持