DIV CSS display (block,none,inline) – lyqandgdp – 博客园

来源: DIV CSS display (block,none,inline) – lyqandgdp – 博客园

DIV CSS display (block,none,inline)

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

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

目录

CSS display使用

display的值有哪些

css display block

css display none

css display inline

1、CSS display使用

以下为DIV CSS运用dispaly

CSS代码:

.divcss{display:none}

Html对应运用:

<div class=”divcss”>我是测试内容</div>

2、display的值有哪些

Css display值与解释

参数:

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

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

inline :内联对象的默认值。用该值将从对象中删除行。如果其前后都是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默认的值。

block元素(即默认display:block)的特点是: 

· 总是在新行上开始;

· 该对象随后的内容自动换行;

· 高度,行高以及顶和底边距都可控制;

· 宽度缺省是它的容器的100%,除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。(意思是他们默认显示方式是block)

实例1.

CSS代码:

.divcss{display:block}

Html对应运用代码:

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

对应结果截图:

clip_image002[8]_thumb[2]

实例2.

<div style="width:200px;margin:0;background-color:#CCCCCC">
<p style="display:block;margin:0;">the first line</p>
<p style="display:block;margin:0;width:40%">the second line</p>
<div style="margin-top:2px;margin-bottom:2px;margin-left:10px;margin-right:10px;height:20px;">test div</div>
</div>

clip_image004[8]_thumb

可以看出这就是三行,可以看出宽度默认设置成其容器的100%,也可以设置成其他百分比。

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

inline元素(即默认display:inline)的特点是:

· 和其他元素都在一行上;

· 高,行高及顶和底边距不可改变;

· 宽度就是它的文字或图片的宽度,不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子

Html对应代码:

<ul>
<li>我父级ul没有divcss5样式</li>
<li>我是独行</li>
<li>我是独行</li>
</ul>
<ul class="divcss5">
<li>我父级ul有divcss5样式</li>
<li>我站成一排</li>
<li>我在divcss5下li站成一排</li>
</ul>

演示结果图:

clip_image006_thumb[1]

说明:设置css为display:inline的li对象,li被排成一排,而未设置的li列表对象仍然继承原来自身独占一行的CSS样式.

inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:

1. 让一个inline元素从新行开始;

将需要新开一行的元素的display设置成block.

2. 让块元素和其他元素保持在一行上;

将块元素的display的属性设置成inline.

3. 控制inline元素的宽度(对导航条特别有用);

4. 控制inline元素的高度;

分享到: 更多 (0)