这篇文章带大家了解一下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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。