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

不能详述，关于这个写起来又是一大篇文章。详情还是参考csstrick上这篇文章，讲得非常细致非常清楚。

display: ruby;

ruby这个取值对于我们亚洲人来说其实是非常有用的一个东西，但是目前除了Firefox以外其它浏览器对它的支持都不太好。简而言之，display: ruby;的作用就是可以做出下面这样的东西：

很好的东西，对吧？如果可以用的话，对我国的小学教育可以有极大的促进。但可惜我们现在暂时还用不了。

ruby这个词在英语里的意思是，但在日语里是ルビ，翻译成中文是旁注标记的意思，我们中文的旁注标记就是汉语拼音。

可以想见，这个标准的制定者肯定是日本人，如果是我们中国人的话，那这个标签就不是ruby，而是pinyin了。还有一个ruby语言，发明者也是一个日本人，和html里这个ruby是两码事，不要搞混了。

ruby的语法大致如下：

display: subgrid;

2015年8月6日，W3C的级联样式单（CSS）工作组（Cascading Style Sheets Working Group）发布了CSS网格布局模块第一级（CSS Grid Layout Module Level 1）的工作草案。

在这个草案里规定了上一节我们讲到的display: grid;的方案。而display: subgrid;是属于2017年11月9日发布的非正式的CSS网格布局模块第二级的内容。

所以这是一个非常新的草案，并且围绕它的争议从来也没有断过。

subgrid总的思想是说大网格里还可以套小网格，互相不影响。

但如果grid里可以再套subgrid的话，那我subgrid里还想再套subgrid怎么办？subsubgrid吗？况且，到底是grid: subgrid;还是display: subgrid;这个也没有达成共识，关于此一系列的争议，感兴趣的同学可以看看这篇文章，英语好的可以看这篇。

列表值

display: list-item;

display: list-item;和display: table;一样，也是一帮痛恨各种html标签，而希望只使用<div>来写遍一切html的家伙搞出来的鬼东西，实际使用极少，效果就是这样：

看，你用<ul><li>能实现的效果，他可以用<div>实现出来，就是这个作用。

属性值

属性值一般是附属于主值的，比如主值里设置了display: table;，就可以在子元素里使用display: table-row-group;等等属性，不过并不绝对。关于它们的作用，主要参考主值就够了。

display: table-row-group;

详情参考display: table;。

display: table-header-group;

详情参考display: table;。

display: table-footer-group;

详情参考display: table;。ruby是用什么语言实现的

display: table-row;

详情参考display: table;。

display: table-cell;

详情参考display: table;。这个属性有必要详细说说，因为它完全可以单独应用，用在高度不固定元素的垂直居中上，详情请见张鑫旭的这篇文章。效果如下图所示：

display: table-column-group;

详情参考display: table;。

display: table-column;

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