ruby是用什么语言实现的 display的32种写法(4)

详情参考display: table;。

display: table-caption;

详情参考display: table;。

display: ruby-base;

详情参考display: ruby;。

display: ruby-text;

详情参考display: ruby;。

display: ruby-base-container;

详情参考display: ruby;。

display: ruby-text-container;

详情参考display: ruby;。

显示值

MDN里把它叫做<display-box> values（盒子值），我把它叫做显示值，主要是为了便于理解。

display: contents;

这大概是2018年年初最令人喜大普达的一件大事了：Chrome 65版本终于要支持display: contents;了！Firefox早就支持了，而Chrome直到现在才开始支持，这么重要的特性，它到底有什么功能呢？结果恐怕会令你大失所望。原来的布局是这样的：

你给中间那个div加上display: contents;之后，它就变成这样了：

这就是display: contents;的作用，它让子元素拥有和父元素一样的布局方式，仅此而已。

display: none;

这么著名的值还用多说吗？

混合值

display: inline-block;

关于display: inline-block;的作用恐怕只要做过3天以上前端的工程师都应该知道。什么也不说了，上一张著名的图片作总结吧：

display: inline-table;

你要能理解inline-block，你就能理解inline-table。在行内显示一个表格，就像这样：

display: inline-flex;

这个就不用多说了吧？跟上面一样，在行内进行弹性布局，参考display: flex;。ruby是用什么语言实现的

display: inline-grid;

同上，在行内进行网格布局，参考display: grid;。

全局值

这些值不是display属性的专利，几乎其它任意属性都可以用，列在这里凑个数。

display: inherit;

继承父元素的display属性。

display: initial;

不管父元素怎么设定，恢复到浏览器最初始时的display属性。

display: unset;

unset混合了inherit和initial。如果父元素设值了，就用父元素的设定，如果父元素没设值，就用浏览器的缺省设定。直接看图最明白：

总结

以上就是在css里display的32种写法。谈了这么多，不知道你记住了多少呢？其实，单纯理解每一个display属性的取值都不难，难的是融会贯通，在恰当的地方运用恰当的值，毕竟我们的目的是为了把代码写短，而不是把代码写长。如果你怕记不太清的话，就请你收藏这篇小文，也许将来的某一天，你会用得着。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-85432-4.html