容器类
W3的容器类是最重要W3.CSS类。
W3的容器类是用于所有类型的HTML容器元素像：
<DIV>，<标题>，<页脚>，<文>，<节>，<BLOCKQUOTE>，<FORM>，等等。
这个头是绿色的。
这页脚是红色的。
这篇文章是浅灰色和文字是棕色的。
容器提供平等
W3的容器类是提供平等的重要：
- 通用利润率
- 常见的垫
- 常见的垂直对齐
- 常见的平面路线
- 常用字体
- 常见的颜色
例
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
试一试» 要添加颜色，只需添加一个w3- 颜色类：
例
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
试一试» 页眉和页脚
W3的容器类可用于样式的标题：
标题1
W3的容器类可用于设计页脚：
例
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
试一试» 文章和章节
W3的容器类可以用来风格的<article>和<section>元素是：
例
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> 试一试»  | 许多网页使用的<section>元素<div>元素而不是<文>和。 |
|---|
注意，面板和行情
W3的容器类可以用来显示各种注意事项：
例
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> 试一试» W3的容器类可以用来显示各种面板：
伦敦是英国的首都城市。 它是英国人口最多的城市，拥有超过13万居民的大都市区。
例
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> 试一试» W3的容器类可以用来显示各种报价：
例
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
试一试» 转至章W3.CSS边框以了解更多有关票据显示，面板和报价。
组合
头
一辆车是用于运输的轮式，自供电的机动车。 该术语的最定义指定汽车被设计为在道路上行驶为主运行。 （维基百科）
使用HTML <div>元素的例子
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> 试一试» 使用HTML语义元素示例
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> 试一试» 集装箱填充
W3的容器类有留下了默认的16像素和右填充，没有顶部或底部填充：
我没有顶部或底部填充
通常你不会有改变容器的默认填充，因为段落和标题提供的利润率，它将模拟填充。
我标题1
我是一个段落。
集装箱切片
W3的容器类没有默认的顶部或底部边缘。
两个容器将显示wothout它们之间的边距：
我标题1
我是一个段落。
我标题1
我是一个段落。
的W3-部分类可以用于分离容器。 它有16像素的顶部和底部边距：
我标题1
我是一个段落。
我标题1
我是一个段落。
例
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
试一试» 隐藏（关闭）集装箱
隐藏或关闭一个容器很简单：
×
要关闭此容器，请点击右上角的X.
例
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
试一试» 打开集装箱
打开密闭的容器非常简单：
例
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
试一试»