我们在网页上构建和划分内容的方式随着时间的推移而不断发展。在网络的早期，页面是使用 <div> 和 <table> 等 HTML 标签构建的，将内容分成块和列。这种做法是僵化的、不灵活的。最近， Elementor引入了 CSS 网格和 Flexbox 等更新方法，启用了使用容器的更加模块化的页面结构方法。这种基于容器的方法在设计网页时提供了更大的灵活性和响应能力。
但容器是否应该完全取代使用 HTML 部分和列的旧方法？在这篇文章中，我们将研究传统 Web 部分和较新的基于容器的方法之间的主要区别。我们将比较每个系统的优点和缺点。了解容器和部分的优势使开发人员能够使用最佳的结构方法来满足其特定的内容和布局需求。通过适当的平衡，容器和部分可以在构建强大的网站架构时相互补充。
定义容器和部分/列
让我们首先明确定义在讨论页面结构时节/列和容器的含义。
部分/栏目
划分网页内容的传统方法是使用 HTML 标签将内容分成不同的块。 <div>、<section>、<article>、<header>、<footer> 等标签允许您将页面分为列和部分。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始例如，您可以使用 <header> 作为顶部导航栏，使用 <section> 作为主要内容主体，使用 <aside> 作为侧边栏，使用 <footer> 作为底部元素。这些 HTML 元素为特定内容类型创建固定容器。
集装箱
容器采用不同的方法，使用 Flexbox 和 CSS 网格等 CSS 属性将页面划分为结构模块或框。这些容器具有可调节的宽度和位置，使布局更加灵活和响应灵敏。
开发人员可以使用“.container”、“.header”和“.sidebar”等类来定义可重用的模块化组件，而不是 <div> 标签。容器不依赖于特定的内容类型（例如部分）。重点是创建灵活的盒子模型。
与使用 HTML 标签创建的更严格的部分相比，这允许更可定制和自适应的页面布局。
为什么使用容器？
容器允许您快速创建网页布局和分组小部件。这使您能够控制内容的显示方式并简化您的网站构建工作流程。
通过使用 Flexbox 容器，您可以通过更精简的代码提高页面速度，更好地控制响应能力，并更轻松地创建复杂的布局。使用容器模板，您可以创建用于网站其他部分的模板。
容器是一个稳定的 Elementor 实验，它们默认在新站点上处于活动状态，或者您可以从 WordPress 仪表板为现有站点激活它们。以下是使用容器的一些好处。
反应能力
设计网页时，重要的是要考虑页面加载性能以及内容如何适应设备和屏幕尺寸。与传统部分相比，使用容器可以更好地控制响应能力和内容显示。
使用容器，可以通过优化不同平台的顺序和可见性的方式对元素进行分组。这可以避免低效地堆叠隐藏元素，并创建更流畅的响应体验。容器使设计人员能够灵活地准确定义内容应如何在不同视口上重排或移动布局。
总体而言，除了部分之外，利用容器还可以通过增强的跨设备优化来改善用户体验。随着屏幕尺寸的变化，容器可以精确管理显示行为和内容优先级。这导致快速加载的页面可以智能地调整其布局，以便在每个设备上获得最佳查看效果。
布局控制
与传统的行/列部分相比，容器为优化设计和复杂布局提供了更大的灵活性。由于容器不限于网格结构，因此设计人员可以更细粒度地控制尺寸和位置。
您可以自定义容器尺寸，并将容器嵌套在其他容器中。这种模块化的“容器中的容器”方法可以轻松地使用可重用组件构建复杂的页面模板。设计人员可以为标题、侧边栏等重复元素创建和应用模板。这确保了整个网站的连续性。
相反，节只能将内容划分为线性文档流中的不同块。行/列网格限制布局选项。容器消除了这些限制，实现了真正可定制的响应行为和可重用的模板模块。
页面速度
使用容器代替部分进行页面设计有助于提高页面加载速度。与部分相比，容器最大限度地减少了所需的分隔符和结构 HTML 元素的数量。
部分通常具有许多嵌套的列、行和子部分，这会增加 DOM 树的复杂性。由于文件大小和资源请求较多，更复杂的 DOM 会导致页面加载速度变慢。
容器通过减少不必要的分隔符来简化后端代码和 DOM 结构。更精简的 DOM 意味着在浏览器中加载时页面的构建速度更快。
要优化页面速度，请在开发人员工具中检查站点的 DOM 树，并寻找将各个部分合并到容器中的机会。删除多余的容器可以直接简化 DOM，从而加快页面加载速度。
超链接
与节相比，容器为链接提供了更大的灵活性。可以使用 HTML 锚标记使整个容器可单击，从而使整个模块充当链接按钮。
这对于具有号召性用语图像的容器非常有用。过去，需要自定义代码才能使整个列可单击。使用容器，将任何模块变成无缝超链接就像添加锚标记一样简单。
部分不直接支持此可单击功能。部分链接的唯一选项是部分中的单个文本或媒体元素。
通过启用容器级链接，容器可以更轻松地创建有效的号召性用语并改进站点导航。这种广泛的链接潜力超出了标准部分的限制。
使用容器的缺点
以下是使用容器而不是部分的一些潜在缺点：
- 语义较少 - 使用 HTML5 标签创建的部分，如 <header>、<footer> 等。具有固有的语义意义和 SEO 优势。对于屏幕阅读器和搜索引擎来说，容器失去了这种上下文含义。
- 更陡峭的学习曲线 - 容器需要 CSS 网格和 Flexbox 的知识来创建复杂的布局。与使用 div 进行简单切片相比，这些是较新的技能。学习曲线可能会更陡。
- 浏览器兼容性问题 - 旧版浏览器可能无法完全支持 CSS 网格和 Flexbox 的所有功能。不同浏览器之间的布局可能会中断或不一致。部分可以在所有浏览器上可靠地工作。
- 为简单布局付出更多努力 - 对于基本的线性页面结构，部分提供了一种简单的方法来划分内容，这对于容器来说可能是过度的。容器在复杂的页面上表现出色。
- 特异性挑战 - 大量使用容器可能会导致 CSS 特异性冲突。可能需要更多的调试工作。各部分具有更清晰的层叠样式。
- 结构更难以可视化 - 容器的嵌套性质可能会使页面布局和元素之间的关系不太直观。部分提供更清晰的视觉划分。
- 过度使用的风险——容器提供了如此大的灵活性，以至于可能会导致过度设计布局。在适当的时候需要克制以保持简单。
总之，容器释放了高级响应能力，但需要更多的设计考虑，以最大限度地发挥其优势，同时减轻任何缺点。
包起来
正如我们所探索的，部分和容器都为构建网页内容提供了优势。部分提供了一种简单的方法来在语义上划分不同的内容区域并建立清晰的视觉层次结构。容器使用 Flexbox 等高级 CSS 功能来实现更加模块化和可定制的布局。
了解何时使用节和容器可以让您充分利用每种方法的优势。对于大多数网站来说，两者的结合将被证明是最佳的。部分可以建立整体页面轮廓和更高级别的内容块。然后，容器可以为复杂或响应式组件（如页眉、侧边栏、页脚等）提供灵活的模块。
像Elementor这样的页面构建器工具已经开始将容器作为传统部分的一个选项进行集成。这使得网页设计人员可以轻松地在直观的拖放界面中利用容器的强大功能。例如，使用 Elementor 容器创建的模板可以在其他容器区域中重复使用。
