dispay属性详解

   一、 网页的所有元素，除了“块”就是“流”而且流都是包含在块里面的（最外层的body就是一个块）.

    display:常用的属性有none,block,inline,inline-block,inherit.其中inherit是继承父元素的样式。

list-item:通过它可以 模拟li列表样式；

table:也是一个块，但和block相比，table具有包裹性；

table-cell:最新的多列布局解决方案。

  二、inline

常用的inline就是图片和文字。

可以把它想象成一杯水，因为是流，所以没有大小和形状。它的宽度取决于父元素的宽度，因此针对inline元素，设置高度和宽度是无效的，

   如何把一个inline元素转化为block元素？

    （1）display:设置为block

  （2）display:设置为table

  （3）display:设置为inline-block;

  对inline元素设置float

根据实践得知，inline元素已经块化。

  对inline元素设置position:absolute/fixed

会使其脱离文档流，高度和宽度都有效。

  三、block

block元素，实际上就是盒模型，一个元素设置了block元素，就遵循盒模型的规则。

  四、inline-block

浏览器默认样式中，规定了几个html元素为display:inline-block

分别是：button，textarea，input,object,select.

顾名思义，它既有inline的属性，又有block的属性。当在页面中编写多个button时，你会发现，它是以流式布局并排排列，是inline的特性，但是你通过height和width改变其尺寸也是能够奏效的，这是block的特性。

因此，inline-block的特性可以总结为：外部开来确实是一个流，但自身确实是一个块。