HTML宽度百分比

#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); 
}

我在线学习本教程，它有一个div封装器，它包装了正文中包含的所有内容。所以：HTML宽度百分比

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

这是一个制作响应式网站的教程。我有点困惑，为什么他包括最大宽度的包装的CSS：1020px 和宽度：98％。那么这是说，具有ID包装的div元素将是1020px的98％？

来源

2015-12-06 CapturedTree

max-width - 最大宽度的元件可以达到
width所述元件的宽度

你的代码表示#wrapper是要视口的98％，但它寿ld永远不会超过1080px。如果窗口宽度的98％大于1020像素，则#wrapper不会变得更宽！

如果您不明白，请发表评论:)

来源

2015-12-06 01:37:08 www139

谢谢你的解释！现在它更有意义。例如，如果浏览器窗口是1400像素。然后，包装div元素将只覆盖1372像素（1400的98％），但由于最大宽度设置为1020像素，包装div元素将只能达到1020像素。现在形成的差距将是190px（1400 - 1020）/ 2在包装的两边，因为我设置了边距：0自动，这将中心我的包装div元素？ – CapturedTree

@ 1290它应该告诉我会发生什么情况并对结果发表评论:) – www139

@ ww139不知道我是否正确地做了这件事，但我检查了我的MacBook Pro 13英寸显示屏，并且显示我的缩放分辨率看起来像1440x900。所以我将div元素的max-width属性设置为1280px，即使我的显示宽度为1440px，div元素也只占用了1020px。所以我认为最大宽度覆盖了98％的宽度属性，这是对包装视图的缩放比例。 – CapturedTree

width属性是相对于浏览器窗口的宽度，但最大的设定，这确保了宽度不会超过1020px（在这种情况下），即使你的浏览器窗口被拉伸到超过1020px

来源

2015-12-06 01:36:24

感谢您的清理！现在有道理！ – CapturedTree

HTML宽度百分比

回答

相关问题