0

我正在尝试学习响应式设计，所以我正在编写教程。当窗口大小缩小时，我的横幅图像逃脱了横幅 div 并且右侧没有正确调整大小。我已经将其范围缩小到一些应用于横幅 div 的样式，但我无法在我的一生中弄清楚它。我的编码的哪一部分允许它这样做？

现场版可以在这里看到： http: //ctxdesigns.net/nelson/

根据 chrome，这就是应用于#banner 的内容

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 0);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(0, 0, 0);
border-top-style: none;
border-top-width: 0px;
display: block;
float: left;
font-family: 'Times New Roman';
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 500px;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 9.796875px;
padding-left: 9.796875px;
padding-right: 9.796875px;
padding-top: 9.796875px;
vertical-align: baseline;
width: 980px;
4

2 回答 2

1

您正在向 100% div 添加 1% 的填充，这是问题所在（需要为 98%，因为您在左侧和右侧添加 1%）：

做这个：

#banner {
background: white;
display: block;
float: left;
padding: 1%;
height: auto;
width: 98%;
}

你会看到它是准确的。

如果您需要将横幅保持在 100%，则添加一个内部 div 以具有填充..

于 2013-09-06T17:33:15.263 回答
0

默认的 CSS Box 模型定义大小如下：

箱型图

内边距、边框和边距添加在宽度之上。所以，最终的宽度最终像width = width + padding + border，然后在其上添加边距。

所以当你设置

#banner {
    width: 100%;
    padding: 1%;
}

最终宽度为 102% (100% + 1% + 1%)。

有些人可能认为这是不直观且没有意义的。值得庆幸的是，您可以使用该 box-sizing属性来解决此问题。通过将其设置为border-box，您将获得您期望的大小。它向内而不是向外推动填充和边框。所以，如果你有

#banner {
    width: 100%;
    padding: 1%;
    box-sizing: border-box;
}

您将得到一个 100% 宽的元素，但内部有 1% 的填充。

box-sizing只要您不需要针对 IE 7 及以下版本，它就具有相当好的浏览器支持。

如果您要使用 box-sizing，许多人会主张设置一个全局选择器以应用于box-sizing: border-box所有元素。

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-10-01T04:04:36.227 回答