談一談在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-width: 960px; /* 2 */
  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}

寬度VS最大寬度

為塊級元素設置width將阻止它擴展到其容器的邊緣（對於像可讀行長度是很友好的）。因此，包裝器元素將占用指定的寬度。當瀏覽器窗口比wraper的特定寬度窄時，就會出現此問題。這將觸發一個水平滾動條，這幾乎總是不合需要的。

使用max-width替代，在這種情況下，是更窄的瀏覽器窗口更好。當在小型設備上使用網站時，這很重要。這里有一個很好的例子來展示這個問題。

HTML：

<div class="width">This div element has width: 960px;</div>
<br />
<div class="max-width">This div element has max-width: 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 {
    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-width: 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
 */