CSS3理解display属性

display属性定义： 可以将页面元素隐藏或者显示出来，也可以将元素强制改成块级元素或内联元素，在页面布局和JavaScript特效中常常用到display属性。

display属性值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit

display常用属性值： inline、block、inline-block和none，接下来对display常用属性值进行分析。

inline: 默认值，特征：内容撑开宽度，不会独占一行，不支持宽高，代码换行会被解析成空格。例如：

<div>
    <li><a href="">首页</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">娱乐</a></li>
</div>

<style type="text/css">
    a{
        background: orange;
    }
    li{
        display:inline;
    }
</style>

将li标签的display属性设置为inline后，a标签中的元素以内嵌的形式排列成行显示

block： 特征：不设置宽度时宽度为父元素的宽度，独占一行，支持宽高。例如：

<div>
    <a href="">首页</a>
    <a href="">新闻</a>
    <a href="">娱乐</a>
</div>

<style type="text/css">
    a{
        background: orange;
        display: block;
        margin: 10px;
    }
</style>

将a标签的display属性值设置为block后，a标签中的元素将以块状显示。

inline-block： 特征：不设置宽度时，内容撑开宽度；不会独占一行，支持宽高，代码换行被解析成空格。总之，将对象呈现为inline，但是对象的内容作为block呈现，使其既具有block的宽度高度特性又具有inline的同行特性。

none: 特征：隐藏元素并脱离文档流，即隐藏时不占用空间。
注意 ：visibility属性同样具有将页面中的元素隐藏，但元素设置为visibility:hidden 后，被隐藏的元素依然占用原来的空间。

总结一下常见的块级元素和内联元素：
块级： div | form | table | p | h1-h6 | dl | ul | ol
内联： span | a | label | input | select | textarea | img