1回答

西门老舅

2021-10-05

同学你好，这里谈一谈我对容器的理解。

首先参考Bootstrap框架对容器的解释：https://getbootstrap.com/docs/5.1/layout/containers/

大概的含义就是定义块，块就是把页面进行划分，可以理解成网页中较大的区域。在Bootstrap中对容器定义了两种：一种固定居中的容器（即：container），一般叫做“版心”，常见的网页一般都是这种版心的结构的，如：腾讯网、慕课网等。还有一种是流体布局（即：container-fluid），一般叫做“通栏”，根据屏幕宽度决定容器大小，常用在管理后台布局中。

实现起来非常的简单，container就是固定宽度 + margin:0 auto;。container-fluid就是width:100%。可以参考Bootstrap的实现方式。

当然还可以把容器看成一些更复杂的布局方式，可以参看elementUI对容器的解释：https://element-plus.gitee.io/zh-CN/component/container.html

用于布局的容器组件，方便快速搭建网页的基本结构。分为：外层容器、顶栏容器、侧边栏容器、主要区域容器、底部容器等。常见的布局形式大概就是上下排列或左右排列。

一般推荐用flex弹性或grid网格去实现布局容器，课程的视频中都有提到过这些结构的布局实现，可以把弹性章节和网格章节好好看一下，还有第八章实战章节，对了练习题中也出现了如何实现容器布局的案例，可以好好做一下。

1

0