OnlyGrape葡提子,英文建站博客英文网站建设，用户体验设计，前段技术研究，seo网站推广

CSS中display属性详解

SEO/网站推广, 前端开发DIV+CSS

前面我们讲过display:inline-block属性兼容以及运用理解大家可以可以参考一下，下面详细的介绍下display属性

display属性基本上分为inline,block,和none。
　　inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
　　block元素前后换行。标题和段落元素是块元素。
　　none，意思不显示元素，在可用性上可以实现漂亮的效果，交替样式或hover效果的高级运用。

设定表现可以更好运用在网页制作上。

 Example Source Code
h1 {
    display: inline;
    font-size: 2em;
}
#header p {
    display: inline;
    font-size: 0.9em;
    padding-left: 2em;
}

设定标题h1为行元素，可以和后面的元素在同一行。

 Example Source Code
#navigation, #seeAlso, #comments, #standards {
    display: none;
}
上面的代码可以使用在打印样式里，比如在导航使用，可以在打印时不显示导航这些无关紧要的东西。

　　display:none和visibility:hidden;的不同在于display:none完全取消元素的显示，visibility:hidden保持元素位置但视觉上的内容不可见。例如，如果3的第二段设置为display:none，第一段将仅跟在第三段，如果设置为visibility:hidden，段落间就会空出。

表格

　　明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现，你可以使用table-row模拟table-cell模拟td。

　　display属性更进一步，可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用columns构建表格，比在html中使用行构建快速。

　　最后，inline-table设定表格前后不换行。

　　使用CSS表格会严重损害可用性。HTML应该用来传递语意，所以如果你有表格数据，那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。

其他表现形式

　　list-item列表项目，就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
　　run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
　　compat根据上下阿文决定表现形式，同样IE和Mozilla都不支持。
　　maker仅仅使用在:before和:after伪元素，设定content属性的表现。content属性默认表现就是maker，所以它只有在覆盖原来属性时才有用。
　　content属性，它的默认就是maker，所以只有在覆盖原来属性时使用。

星期五, 10月 24th, 2008 | 分类：SEO/网站推广, 前端开发DIV+CSS | RSS 2.0 | 留言/评论 | Trackback