所以我有 2 个 div，1 个在另一个 div 中。#outer 最外面的 div 和 #frame w/in #outer 的 div。
关于#outer，我应用了一张背景图片来占据整个浏览器空间。
框架是文本所在的位置 - 文本会随着不同的字符串长度而不断变化。然而，我只希望#frame占据#outer的中心部分，这样文本就不会泄漏到外面（这是因为#outer中的背景图片有一个类似黑板的图形——我希望它看起来就像文本是被写在黑板上，没有文字超出线条）。
我应该为此使用填充，对吗？就像在 #frame 上设置填充属性一样吗？或者我应该调整框架的宽度？我该如何居中这个傻瓜？！漂浮？软垫？我迷路了...
HTML：
<div id='outer'>
<div id='frame'>
</div>
</div>
CSS：
#outer {
height: 612px;
background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll;
background-size: 100%;
}
#frame {
text-align: center;
height: 612px;
padding: 50px;
overflow: auto;
font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
font-size: 60px;
color: black;
}
在过去的一个小时里，我一直在摆弄填充、边框和边距，试图总体上掌握盒子模型。任何人都可以帮助我完成此任务的任何快速指示吗？
PS 可能很难看到，因为这可能与您的浏览器设置不完全兼容，但您可以转到：
http://www.abveaspirations.com
看看上面的代码当前输出了什么。正如您可能看到的，特别长的字符串/文本泄漏到玻璃外面。顺便说一句，我正在使用 textualizer 插件，不确定这是否会改变任何东西......
这个答案比它可能的要复杂一点。这几乎可以通过填充来完成，但我觉得这种方式对于你正在做的事情来说是最平滑和可靠的结果，而且它也非常适合一个响应式网站，因此当您放大或缩小屏幕尺寸时它不会中断。
这是实际的演示，因此您可以按照我所说的进行操作，同时查看完整的代码：
好的，首先，只是为了设置你的外部 div，我基本上只是设置position: relative;它，其他一切都很好。这只是因为我将框架设置为position: absolute;并且我希望它相对于这个外部 div 定位。
之后，让我们看看框架的变化......
position: absolute;
top: 10%;
bottom: 20%;
left: 15%;
right: 15%;
这些样式的目的是将 div 的边界扩展到某些点。请注意，框架元素不再设置高度或宽度，必须将其删除。基本上，这些样式表示 div 的顶部距离外部 div 的顶部为 10%。底部将距离外层底部 20%，依此类推。我使用百分比而不是像素，因为这将确保定位适应屏幕的任何宽度。
请注意，我在框架上设置了一个虚线边框，以便您可以随时看到框的大小和位置。
我并不担心文本内容的垂直居中，因为我相当确定您的文本效果插件可以处理该问题。如果我在这方面错了，请告诉我，我可以对此进行扩展。
现在，还有另一个挑战，一旦屏幕达到一定的较小尺寸，图像的高度就开始小于外部容器的高度。这可能不是您想要的，所以我添加了一个媒体查询：
@media only screen
and (max-width: 1060px) {
#outer {
height: 0;
padding-top: 47.85%;
}
}
其作用是仅在屏幕达到一定宽度后才应用样式。我根据图像开始收缩超过容器边缘的点来选择最大宽度。
至于应用的样式，这是在调整大小时保持容器的纵横比的一个小技巧。我将 设为height0，然后使用 重新创建高度padding-top。我使用的数字（47.85%）是图像高度相对于宽度的近似比率。（图像的高度约为宽度的 47.85%。）现在将开始按屏幕缩小整个容器，以匹配图像。因为您的车架是绝对定位的，所以它会在骑行过程中保持在周围，并保持基于百分比的位置。
我没有做但您可能感兴趣的一件事是，一旦图像宽度开始变得如此宽以至于底部被切断，就设置另一个媒体查询。此时，您可以将框架底部设置为0%与其匹配。（随着屏幕变得越来越宽，您可能还需要定期更新该top属性。这只是因为您设置了截断图像的高度，使得百分比变得无关紧要。）
在我链接到的那个示例中，尝试重新调整底部框架的宽度大小，并观察虚线如何保持在应有的位置，以及内部内容如何调整。还要注意容器如何保持设定的高度，直到图像变得太小，然后所有内容都开始缩小。
我只能看到一个明显的问题，那就是因为所有文本内容都是绝对逐字母定位的，重新调整屏幕大小将导致元素溢出，直到新幻灯片进入，并且字母根据新的宽度重新定位。这只是今后需要牢记的事情。