div display: blok/none 总结

本文为转帖, 原帖请看:

http://www.cnblogs.com/Bill_Lee/archive/2011/04/11/2013110.html

 

几点, display:block: 自动换行

display:none : 隐藏div内容,与 hidden相比, 不占用位置.

 

 摘抄:

 

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代码：

view sourceprint?

.divcss{display:block}

Html对应运用代码：

view sourceprint?

<span class="divcss">我的后面文字会换行</span>我是被前面的divcss对应CSS属性换行。

<span>不会被换行,因为我没有被设置display:block</span>

对应结果截图:

 

实例2.

view sourceprint?

<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>

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

4、css display:none

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

例如在导航条的二级菜单中就会使用此属性显示和隐藏二级菜单。

5、css display:inline

Display:inline,我们常常在li中使用它。功能是让li排成一排（称：删除行）。

接下来我们以一个未设置li列表与一个设置css Display inline样式对比实例演示演示。

CSS代码

view sourceprint?

ul.divcss li{display:inline}

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

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

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

· 高，行高及顶和底边距不可改变；

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

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

Html对应代码：

view sourceprint?

<ul> 

<li>我父级ul没有divcss5样式</li> 

<li>我是独行</li> 

<li>我是独行</li> 

</ul>

<ul class="divcss5"> 

<li>我父级ul有divcss5样式</li> 

<li>我站成一排</li> 

<li>我在divcss5下li站成一排</li> 

</ul>

演示结果图：

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

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

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

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

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

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

3. 控制inline元素的宽度（对导航条特别有用）；

4. 控制inline元素的高度；

<script type="text/javascript"></script>

, inline

<script type="text/javascript"></script>