如何在不推出内容的情况下在页面周围留出页边距

Question

我想有一个有点流畅的网站，其中最小宽度将是1000px，最大宽度将是1200px。有没有人可以教我怎么做，或者给我指点教程？

我遇到的问题是，如果我在正文上留出10px的页边距，页面上的任何内容都会被推离页面右侧10px。我该如何纠正这个问题呢？

Answer 1

这里有一个很好的网站，它应该可以帮助你看到创建一个流畅和固定布局的网站的CSS -

http://csslayoutgenerator.com/

关于你的10px保证金问题，这是我做的一个Test fiddle- (CLICK here)。这里面有什么问题？

css-

body
{
    margin:10px;
    min-width:400px; 
    max-width:450px;
}
#test
{
background-color:yellow;
}

Answer 2

如果您想要应用您的边距，仅当您的宽度超过特定值时，您可以使用媒体查询：

@media screen and (min-width: 1200px) {
    margin:10px;
}

Answer 3

将border-box属性添加到您的元素。这可确保无论您在元素上放置什么边框、边距或填充，它都将始终生成您指定的宽度

#element{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
min-width:1000px;
max-width:1200px;
}