css - 如何在不推出内容的情况下在页面周围获得边距

Question

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

我遇到的问题是，如果我在正文上留出 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/

关于您的 10 像素保证金问题，这是我制作的测试小提琴（单击此处）。其中有什么问题？

css-

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