如何在没有内容被推出的情况下在页面周围获得边距

Question

我希望有一个流动的网站，其中最小宽度为1000px，最大宽度为1200px。有人可以告诉我如何做到这一点或指向我的教程吗？

我遇到的问题是，如果我在身体上留下了10px的边距，页面上的任何内容都会被页面右侧推出10px。我该如何纠正？

Answer 1

如果您想申请保证金，只有当您的宽度超过特定值时，您才可以使用媒体查询：

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

Answer 2

将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;
}

Answer 3

这是一个很好的网站，可以帮助您查看用于创建流畅和固定布局网站的CSS -

http://csslayoutgenerator.com/

关于你的10px保证金问题，这是一个测试小提琴 - (CLICK here)，我已经做了。它有什么问题？

的CSS -

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