谈一谈在css中的wrapper

wrapper 和 container

习惯上 wrapper表示封装单个对象，赋予其更多的功能和接口
container包含多个元素的结构
所以，二者意义不同，功能不同

说到wrapper，通常会想到用一个

包含文档的HTML的其余部分。我相信我们中的许多人都经历过一段时间，我们把它设置为960像素的宽度，然后居中对齐。

Container，而另一方面，通常用于另一种控制。有时需要实现多个组件的行为或样式。它用于在语义和视觉上分组元素的目的。作为一个例子，Bootstrap有一个 “ container classes ”来容纳它们的网格系统或者包含各种其他组件。

Wrapper和container也可以代表着相同的东西，这取决于开发人员的想法。也可能有其他约定，所以最好的建议通常是实现对你最有意义的任何事情。但请记住，命名是开发者活动中最重要的部分之一。命名约定使我们的代码更加可读和可预测。谨慎选择！

一般而言的wrapper：

.wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */
  max- 960px; /* 2 */
  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}

宽度VS最大宽度

为块级元素设置width将阻止它扩展到其容器的边缘（对于像可读行长度是很友好的）。因此，包装器元素将占用指定的宽度。当浏览器窗口比wraper的特定宽度窄时，就会出现此问题。这将触发一个水平滚动条，这几乎总是不合需要的。

使用max-width替代，在这种情况下，是更窄的浏览器窗口更好。当在小型设备上使用网站时，这很重要。这里有一个很好的例子来展示这个问题。

HTML：

<div class="width">This div element has  960px;</div>
<br />
<div class="max-width">This div element has max- 960px;</div>
<br />
<strong>Note:</strong> Drag the browser window to smaller than 960px wide, to see the difference between the two divs!

css:

/**
 * The problem with this one occurs
 * when the browser window is smaller than 960px.
 * The browser then adds a horizontal scrollbar to the page.
 */
.width {
     960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}
/**
 * Using max-width instead, in this situation,
 * will improve the browser's handling of small windows.
 * This is important when making a site usable on small devices.
 */
.max-width {
    max- 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}
/**
 * Credits for the tip: W3Schools
 * https://www.w3schools.com/css/css_max-width.asp
 */