css display属性用法详解|三体教程
文章目录

css display属性用法详解

css display属性,小编觉得是用得最多的,至少编写三体教程的时候,许多地方都用到了。

不管是span、div、p标签都可以使用display属性。

常用display

div{display:block;}

有换行的作用,它是一个块。

div{display:none;}

将元素及对应的内容隐藏。

div{display:inline;}

不会换行,将在一排显示。

display的值比较多,下面将详细列出。

block :块对象的默认值。用该值为对象之后添加新行

none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline :内联对象的默认值。用该值将从对象中删除行

compact :分配对象为块对象或基于内容之上的内联对象

marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用

inline-table :将表格显示为无前后换行的内联对象或内联容器

list-item :将块对象指定为列表项目。并可以添加可选项目标志

run-in :分配对象为块对象或基于内容之上的内联对象

table :将对象作为块元素级的表格显示

table-caption :将对象作为表格标题显示

table-cell :将对象作为表格单元格显示

table-column :将对象作为表格列显示

table-column-group :将对象作为表格列组显示

table-header-group :将对象作为表格标题组显示

table-footer-group :将对象作为表格脚注组显示

table-row :将对象作为表格行显示

table-row-group :将对象作为表格行组显示

实例(block、none、inline、inline-block)

<style>

.div1{display:block;}

.div2{display:none;}

.div3{display:inline;}

.div4{display:inline-block;}

</style>

<div class="div1">display:block属性实例,将会单独在一列显示。</div>

<div class="div2">display:none属性实例,这段内容将不可见,因为被隐藏了。</div>

<div class="div3">display:inline属性实例,将和下面的div在同一排显示。</div>

<div class="div4">display:inline-block属性实例</div>

以是就是三体教程为大家整理的关于css display属性的相关知识,希望对小伙伴们有帮助。

本文网址:http://www.santii.com/article/60.html


数据更新时间:2018-07-22