Question

容器和包装有什么区别？什么是每个人的意思？

Answer 1

根据this回答：

在编程语言中，通常使用容器这个词   可以包含多个元素的结构。

包装器代替包装单个对象的东西   为它提供更多功能和接口。

此定义与单词的含义相匹配，对于以下HTML结构非常有用：

require 'csv'

rows = [[1,2,3],[4,5]]                    # [[1, 2, 3], [4, 5]]

# To CSV string
csv = rows.map(&:to_csv).join             # "1,2,3\n4,5\n"

# ... and back, as String[][]
rows2 = csv.split("\n").map(&:parse_csv)  # [["1", "2", "3"], ["4", "5"]]

# File I/O:
filename = '/tmp/vsc.csv'

# Save to file -- answer to your question
IO.write(filename, rows.map(&:to_csv).join)

# Read from file
# rows3 = IO.read(filename).split("\n").map(&:parse_csv)
rows3 = CSV.read(filename)

rows3 == rows2   # true
rows3 == rows    # false

Answer 2

它们之间没有区别。

这就是你想要调用的<div>，它通常包含页面的所有内容

Answer 3

如果您选择提供一个，可能会有所不同。实际上，为容器/包装器设置两个名称是有意义的，因为它们具有不同的功能：

1）我们想到的标准包装的宽度为960px或60em，并将其内容集中在屏幕上（保证金：自动）

2）还有另一个包装 - 在某些情况下需要实现粘性页脚。具有最佳浏览器支持（没有js且至少非常干净）的粘性页脚就是这个：http://ryanfait.com/sticky-footer/

apropos sticky：坚持现有的命名约定，我喜欢apppie，它清楚地区分了wrap 1（称为容器）和wrap 2（称为wrapper）。见：http://www.apppie.org/pages/approach/naming.html

可能还有其他惯例。如上所述，你区分是有道理的 - 你怎么了。

Answer 4

我喜欢在这里扔东西：

根据当前的CSS标准和最佳做法，通常您具有一个具有display: grid属性的容器元素。 div包含布局的所有columns和rows。它还具有视口宽background，border和shadow颜色。这些属性是使用浏览器的整个宽度显示的。

现在，您需要添加内容。您必须创建另一个div，该div是max-width: 1256px，然后输入margin: 0 auto和width: 100%。

因此结构将是：

<section class="container">
  <div class="wrapper>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</section>

这打破了先前答案的逻辑：container具有许多元素，而wrapper仅具有一个元素，但是我发现这种方法在构建具有与其他部分特定的单独样式的部分时是有效的像阴影和边框。

因此，在某些情况下：

container用于设置节的整个宽度的样式。 wrapper用于在其中放置max-width内容的样式和居中。

CSS Language Speak：Container vs Wrapper？

4 个答案: