标签区别

<p></p>是段落标签，也就块元素。

<div></div>也是块元素.

<span>是内联元素
块状元素：独占一行，width和height起作用
内联元素：width和heigh不起作用，不占一行

举例说明：

image.png

如上，如果产品的名称用span来显示的话：

 <span className="w-3/5 bold heading6 text-black">The product name can be longer and occupy two lines</span>

效果如下：

image.png

如果用p标签来显示的话,代码如下：

  <p className="w-3/5 bold heading6 text-black">The product name can be longer and occupy two lines</p>

效果如图：

image.png

差异一目了然了吧。

flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示
一句话来描述就是 当Flex Box 容器没有设置宽度大小限制时，当display 指定为 flex 时，FlexBox 的宽度会填充父容器，当display指定为 inline-flex 时，FlexBox的宽度会包裹子Item.