display

目前用的最顺手的是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

    
listitem
    fake listitem
    
listitem
  

• display:inline-block
• 从名字上就能大概看出该元素与inline和block之间存在一定联系，inline-block一方面继承了inline元素不自动换行的特性，另一方面又像block一样会响应对其设置的width、height、line-height以及margin-top/bottom属性；
• 多个inline-block元素可能出现间距，来看一段代码和实现效果：

      inline-block
      inline-block
      inline-block
  

span{
    display:inline-block;
    padding:1em;
    margin:0;
    background:#fcc;
}

inline-block间距

可以看到这些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
  未完待续...