谈一谈在css中的wrapper
Posted 无线魔术师
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谈一谈在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
*/
以上是关于谈一谈在css中的wrapper的主要内容，如果未能解决你的问题，请参考以下文章