最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

DIV CSS display (block none inline)属性的用法教程

在一般的CSS布局制作时候,我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例、图演示讲解方法来学习和了解DIV CSS display

1、CSS display使用

以下为DIV CSS运用dispaly,说明这里dispaly值任意
CSS代码:

.divcss{display:none}

Html对应运用:

<div>我是测试内容</div>

根据以上可以自己DIV+CSS下,看看使用结果。

2、display的值有哪些

Css 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 :将对象作为表格行组显示

3、css display block

Display:block是我们常用的,block也是Display默认的值。
解释:该对象随后的内容自动换行。
css display block实例
CSS代码:

.divcss{display:block}

Html对应运用代码:

<span>我的后面文字会换行</span>我是被前面的divcss对应CSS属性换行。
<span>不会被换行,因为我没有被设置display:block</span>

说明这里使用span作实例,一个被设置CSS样式,一个未设置,自己可以对比被设置DIV display:block样式的对象随后的内容被换行。

4、css display none

此display的none值,我们也常常使用,用于隐藏对象内容,被隐藏的对象也不会占用自身固有宽度高度空间。

5、css display inline

Display:inline,我们常常在li中使用它。功能是让li排成一排(称:删除行)。
接下来我们以一个未设置li列表与一个设置css Display inline样式对比实例演示演示。
Css代码

ul.divcss li{display:inline}

解释:ul.divcss对应li css样式属性为display:inline

Html对应代码:

<ul>
< li>我父级ul没有divcss样式</li>
< li>我是独行</li>
< li>我是独行</li>
< /ul>

<ul>
< li>我父级ul有divcss样式</li>
< li>我站成一排</li>
< li>我在divcss下li站成一排</li>
< /ul>

说明:设置css为display:inline的li对象,li被排成一排,而未设置的li列表对象仍然继承原来自身独占一行的CSS样式。
以上是Hicoogle为大家整理和展示的关于CSS display常用的属性对应display none、display inline、display block值的详细讲解与实例,希望对你有帮助。

转载请注明:嗨酷哥,有你更酷! » DIV CSS display (block none inline)属性的用法教程

与本文相关文章

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项