《前端》css之Wrapper 解惑--然并软---2020年8月31日

wrapper在html中是一个常见的术语。我们给它一个类，该类负责将所有可见元素封装在页面上。

看看“wrapper”和“container”之间的区别。

 

在编程语言中，container通常用于可以包含多个元素的结构。另一方面，wrapper是围绕单个对象包装的，以提供更多的功能和接口。

说到wrapper，通常会想到用一个<div> 包含文档的HTML的其余部分。我相信我们中的许多人都经历过一段时间，我们把它设置为960像素的宽度，然后居中对齐。

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

/**
 * 1. Centers the content. Yes, it's a bit opinionated.
 * 2. See the "width vs max-width" section
 * 3. See the "Additional Padding" section
 */
.wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */
  max-width: 960px; /* 2 */
  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}