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

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

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

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

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

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

/**
 * 1. Centers the content. Yes, its 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 */
}
经验分享 程序员 微信小程序 职场和发展