目前用的最顺手的是display:none，用来观察元素存在与否对布局的影响。其次就是常见的block、inline和inline-block，算是CSS入门基础；再来则是以某种特定形式将元素渲染成需要的样式，如list-item、table等；
-
display:run-in
MDN 解释
兼容性
大致意思就是：
当run-in元素中存在块级元素(作为其子元素)时，其效果等同于block;
当run-in元素后伴随一个块级元素时，run-in元素被当作该块级元素的首个内联元素；
当run-in元素后伴随一个内联元素时，run-in元素变成一个块级元素；
display:list-item
<ul>
<li>listitem</li>
<span>fake listitem</span>
<li>listitem</li>
</ul>
- display:inline-block
- 从名字上就能大概看出该元素与inline和block之间存在一定联系，inline-block一方面继承了inline元素不自动换行的特性，另一方面又像block一样会响应对其设置的width、height、line-height以及margin-top/bottom属性；
- 多个inline-block元素可能出现间距，来看一段代码和实现效果：
<ul>
<span>inline-block</span>
<span>inline-block</span>
<span>inline-block</span>
</ul>
span{
display:inline-block;
padding:1em;
margin:0;
background:#fcc;
}
可以看到这些inline-block元素margin为0，但依然出现了间距，原因是浏览器会将HTML中的换行符和多余的空格等合并成一个空格，因而出现了间距问题，要消除这些间距可以考虑：
定义inline-block元素的父元素font-size为0，再定义各个子元素font-size；
将inline-block元素写在同一行，避免换行符的出现；
将inline-block设置为浮动；
使用负值lettet-spacing、word-spacing或者margin
深入拓展: inline-block的前世今生
display:[inline-]table[-*]
CSS2.1中提供了一系列表格模型属性，可以将元素样式渲染成类似tbody、tr、td等各种表格标签；可以在 基于display:table的CSS布局 里了解一下匿名表格元素的创建规则；
顺便了解一下 张鑫旭所知道的几种display:table-cell的应用 ；
-
一个问题：若干连续的元素被设置为display:table-cell之后似乎无法应用border-collapse的特性，有没有设置间距的可能？如何实现？
设置了display:table-cell的div × 3
如上图，尝试使用border-collapse，没有响应。
目前想到的方案:- 使用与背景同色的边框来设置间距，如果间距不等就会有点难搞；
-
添加几个空的span也设置为table-cell然后设置宽度，感觉很奇怪，效果如下：
利用span调节间距
display:flex/grid/ruby
Flex Layout
Grid Layout
Ruby Layout
未完待续...
