关于网页布局css的container和wrapper

平时在看网站页面源码的时候总会看到类似class=”container”或者class=”wrapper”类似的用法,为了解决自己的困惑,我搜索了一下相关的关键词,发现其实也有其他人有类似的疑问。
这里我找到一个个人比较认同的答案作为这个问题的解释。
链接在此


答案大概是这么写的:
A container or wrapper is a dummy div used for purposes of setting backgrounds, floats or padding on another div. Sometimes you need an parent div to get a block level element to do what you want, whether that’s simply setting a background or using margin: 0 auto to center a block. People just call them wrappers out of custom and also that it’s a very uncommon need for a class name. It means nothing technically.

也就是说,其实我们用container和wrapper作用差不多,使用场景是当我们需要统一控制块级元素的背景或布局居中时。这时候通过简单地为需要统一表现的块级元素加上一层div来实现控制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="header">
<div class="container">
<ul class="nav">
<li class="nav-item"></li>
<li class="nav-item"></li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<div class="article">
... ...
</div>

</div>
</div>

.container {
  width: 980px;
  margin: 0 auto;
}