在前端开发中，我们经常使用CSS来样式化HTML元素。其中一个常见的CSS属性是display，它用于定义元素应该如何显示在页面中。通常，我们可以使用预定义的值（如block、inline和none）来指定元素的显示方式。但是，在一些情况下，我们可能需要自定义display的属性值以实现特定的布局或功能。
CSS类中没有定义
然而，在某些情况下，我们可能会遇到这样的问题：当我们想要设置某个元素的display属性时，我们发现该属性在任何已知的CSS类中都没有被定义。例如，如果我们想要将一个<div>元素显示为一个网格单元格，我们可能会尝试这样做：
div {
display: cell;
}但是，我们会发现这样设置并没有生效，因为cell不是CSS中的一个有效的display属性值。那么，我们该怎么办呢？
自定义属性值
幸运的是，CSS允许我们自定义属性值，以便更好地满足我们的需求。我们可以使用--前缀来定义自己的CSS变量，并在其中包含我们自定义的属性值。例如，我们可以这样定义一个名为cell的--display变量：
:root {
--display-cell: table-cell;
}现在，我们可以使用这个变量来设置任何元素的display属性为table-cell。例如，我们可以这样设置一个<div>元素：
div {
display: var(--display-cell);
}这将使该元素显示为类似于表格单元格的方式。
指导意义
自定义CSS属性值的能力为我们提供了更多的灵活性和控制力，帮助我们实现更精细的布局和交互效果。但是，我们应该注意以下几点：
- 自定义属性值只在支持CSS变量的浏览器中有效。在旧版浏览器中，这些属性值可能不被识别或被忽略。
- 我们应该避免在全局作用域中定义过多的自定义属性值，因为它们可能会与其他代码产生冲突，并导致难以调试的问题。
- 我们应该根据具体情况选择合适的命名规范来命名我们的自定义属性值，以便于代码维护和理解。
示例代码
最后，这里提供一个完整的示例代码，展示如何自定义display属性值并将其应用到一个<div>元素上：
-- -------------------- ---- -------
--------- -----
------
------
-------
----- -
--------------- -----------
-
---------- -
-------- --------------------
-------- -----
------- --- ----- -----
-
--------
-------
------
---- ---------------------- -------
---- ---------------------- -------
---- ---------------------- -------
-------
-------在这个示例中，我们定义了一个名为--display-cell的变量，并将其设置为table-cell。然后，在.grid-item类中，我们使用var()函数将该变量作为display属性值进行了应用。最终，我们将该类应用到三个<div>元素上，并得到了一个类似于网格单元格的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24603