Css 装备ui中长方体和网格的区别是什么

和在材质界面中的区别是什么

什么时候使用每一个

---

我感到困惑的是，

网格创建了布局之间的视觉一致性，同时允许各种设计的灵活性。Material Design的响应用户界面基于12列网格布局

工作原理 网格系统由网格组件实现：

它使用CSS的灵活方框模块来实现高度灵活性。 布局有两种类型：容器和项目。 项目宽度是以百分比设置的，因此它们始终是流动的，并相对于其父元素调整大小。项目具有填充以创建单个项目之间的间距。有五个网格断点：xs、sm、md、lg和xl

一个盒子就是那个，一个盒子。它是一个环绕其内容的元素，其本身不包含样式规则，也不对视觉输出产生任何默认效果。但这是一个根据需要设置样式规则的地方。它不提供任何真正的功能，只是一个占位符，用于控制分层标记结构中的样式

我经常认为它在语义上类似于JSX空元素：

<>
    Some elements here
</>

这里有一些元素

但仅使用一些重要的UI功能：

 <Box component="span" m={1}>
     <Button />
 </Box>

简而言之：

Box

是

div

更强大、更方便、更具潜力的替代品

---

Grid

是的语法糖。

当您想要对多个项目进行分组并控制它们在页面上的外观时，请使用Box。例如，您可以选取几个段落，并使用一个框在其周围放置边框

使用网格设置网格布局系统，以在页面上的列中组织内容。设计师们将页面分成12列，认为将内容沿每列或每组列对齐在视觉上更具吸引力。这里有一篇文章提供了关于这个主题更好的细节：

Box

对于大多数CSS实用程序需求，Box组件充当包装器组件。Box组件打包了@material ui/system中公开的所有样式函数。它是使用@material ui/core/styles的styled（）函数创建的

网格

GridBox是网格的低级表示。除了低级笔记本表达式操作外，GridBox不需要直接使用。在笔记本中，可以使用添加网格框的列，使用添加行。或者可以使用菜单项开始构建网格框

框

对于大多数CSS实用程序需求，Box组件充当包装器组件。

长方体组件将包裹您的组件。它创建一个新的DOM元素，默认情况下，可以使用component属性更改该元素。假设您想使用a来代替：

<Box component="span" m={1}>
  <Button />
</Box>

当更改可以隔离到一个新的DOM元素时，这非常有效。例如，可以通过这种方式更改边距

---

网格

材料设计响应性布局网格可根据屏幕大小和方向进行调整，确保布局的一致性。

---

网格创建布局之间的视觉一致性，同时允许各种设计的灵活性。Material Design的响应用户界面基于12列网格布局

它的工作原理

网格系统由网格组件实现：

• 它使用CSS的灵活方框模块来实现高度灵活性
• 布局有两种类型：容器和项目
• 项目宽度是以百分比设置的，因此它们始终是流动的，并相对于其父元素调整大小
• 项目具有填充以创建单个项目之间的间距
• 有五个网格断点：xs、sm、md、lg和xl

---

欲了解更多信息，请访问：&