css之display
Created at 2016-08-21 Updated at 2017-01-06 Category Front-End
引言
网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）
在网上查找出display所有的属性，你会发现它有很多，但是不是每个都常用，甚至大部分你都没有用过
看上图。常用的属性有：none、block、inline、inline-block、inherit，其中inherit是继承父元素的样式
-list-item：通过它可以模拟li列表样式；
table：也是一个“块”，但和block相比，table具有包裹性；table-cell：最新的多列布局解决方案；
inline
常用的inline就是文字和图片，其实inline真没什么好说的，大家可以把它想象成一个杯子里的水，它是“流”，是没有大小和形状的，它的宽度取决于父容器的宽度。
因此，针对 inline的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto，并不是我们设定的值
一个很基础的问题：如何把inline元素转换成“块”元素？相信绝大部分人的回答是display:block，但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧？
还有两种情况你应该去了解
第一，对inline元素设置float
我们对span元素添加一个float:left，运行看看效果，你就会大吃一惊。从显示的效果和监控的结果上看来，span元素已经“块”化。不要忘记float的“破坏性”、“包裹性”，在这里同样适用。
第二，对inline元素设置position:absolute/fixed
还是有同一个例子做演示，这次在span元素上加上absolute/fixed，效果大家应该能猜到，和加上float的效果相同。
inline-block
浏览器默认样式中规定了几个html元素为display:inline-block，回顾一下
因此，inline-block的特点可以总结为：外部看来是“流”，但是自身确实一个“块”。