所有分辨率的CSS

Question

我已经为1680x1050的分辨率设计了我的网站。但是，因为我大多数时候总是使用position：absolute，所以设计现在非常混乱（css中的新功能）。所以，在我再次开始设计之前，我决定寻求专业帮助。我将尝试使用的方法是使div元素包含页面的所有内容

<div style="width:760px;margin: 0 auto;">
...all contents
</div>

，以页面的所有内容为中心。然后，我将用我们的位置重新设计我的旧内容：relative;左：..像素;和顶部：... px;。我问这个，因为我不认为宽度：760px;保证金：0自动;正确地将内容集中在内（当我尝试这个方法而没有任何东西离开时：.. px或top：.. px，元素没有正确居中）。我希望我能很好地告诉我的方法:)从中心获取每个元素并将它们放在应该存在的位置。我怎样才能做到这一点？我不认为这个div正在这样做：（

注意：我在原始设计中留下了适当的空位。我的意思是，在1680x1050的分辨率下，我没有左右使用大约300px。我的设计alrady似乎集中在1680x1050。

Answer 1

1. 从不为屏幕尺寸设置样式
2. 尽量避免使用position:absolute
3. 如果您需要position:absolute，请尝试使用％值

为什么不使用它？

1. 正如您已经提到的，它会弄乱您的代码
2. 它减慢了浏览器中的渲染速度
3. 元素从正常的文档流程中取出 - ＆gt;动态内容可能会破坏您的布局

如果您真的需要position:absolute，可以执行以下操作来集中元素：

1. 指定width和margin:0 auto;

2. 定义所有偏移值，如：

   element{ position:absolute; left:10px; right:10px; top: 10px; }

这会使你的元素的上边距，左边和右边的“边距”为10px，并赋予它动态高度。

Answer 2

使用：

<div style="width:760px;margin: 0 auto;">
   <div style="position: absolute; width: 760px;">...all contents</div>
</div>

绝对元素相对于最直接的绝对定位父元素的位置，如果没有，则它相对于文档。但请不要使用内联样式。设计静态分辨率也是不好的做法。