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

原创 2015年11月17日 19:20:07

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

目录
  1. CSS display使用
  2. display的值有哪些
  3. css display block显示
  4. css display none隐藏
  5. css display inline

一、CSS display使用     -   TOP

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

CSS代码:
.divcss5{display:none}

Html对应运用:
<div class="divcss5">我是测试内容</div>
根据以上可以自己DIV+CSS下,看看使用结果

常用display
1、div{display:block} 有换行作用。

案例:图片做背景,隐藏图片上文字http://www.divcss5.com/jiqiao/j55.shtml

2、div{display:None } 隐藏对象及对象内容。
案例:CSS隐藏HTML内容 http://www.divcss5.com/jiqiao/j55.shtml

3、div{display:Inline } 在一排显示。
代表案例,对li列表默认一排显示li{display:Inline }

二、display的值有哪些     -   TOP

Css display值与解释-(详细可见CSS手册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 :将对象作为表格行组显示

三、css display block     -   TOP

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

CSS代码:

  1. .divcss5{display:block} 

Html对应运用代码:

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

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

四、css display none隐藏内容     -   TOP

此display的none值,我们也常常使用,用于隐藏对象内容,被隐藏的对象也不会占用自身固有宽度高度空间。
详情可见CSS隐藏讲解:http://www.divcss5.com/jiqiao/j55.shtml

五、css display inline     -   TOP

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

Css代码
ul.divcss5 li{display:inline}
解释:ul.divcss5对应li css样式属性为display:inline

Html对应代码:

  1. <ul> 
  2.     <li>我父级ul没有divcss5样式</li> 
  3.     <li>我是独行</li> 
  4.     <li>我是独行</li> 
  5. </ul> 
  6.  
  7. <ul class="divcss5"> 
  8.     <li>我父级ul有divcss5样式</li> 
  9.     <li>我站成一排</li> 
  10.     <li>我在divcss5下li站成一排</li> 
  11. </ul> 

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

以上是DIVCSS5为大家整理和展示的关于CSS display常用的属性对应display none、display inline、display block值的详细讲解与实例,希望对你有帮助。同时有什么问题或疑问请到DIVCSS5的CSS论坛发贴讨论、求助。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

原文:http://www.cnblogs.com/Bill_Lee/archive/2011/04/11/2013110.html DIV CSS display (block n...
  • akiyame
  • akiyame
  • 2014年12月13日 22:41
  • 735

display:none ,inline, block, inline-block

Display:inline inline-block block none

css中display:inline-block错位问题

就目前来说,常用的布局方式有table、div,因为使用table都是比较规整、传统的布局方式,现在大部分网页为了美观,大多使用div进行布局,使用div布局就避免不了对块级元素的布局调整,在仿作百度...

【CSS笔记之十】深入认识display:inline-block和hasLayout

【CSS笔记之十】display:inline-block和hasLayout hasLayout设计的初衷是用于辅助块级元素的盒子模型的,它是用于块级元素的。如果用于行内元素,会引发一些特殊效果。...

css中display:inline-block属性值的空隙消除

引用:http://www.duidea.com/2012/1129/1606_2.html 你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解...

display:inline、block、inline-block和none的区别

1、display:block就是将元素现实为块级元素:   元素的特点是:   总是在新行上开始;   高度,行高以及顶部和的边距都可以控制;   宽度缺省是它的容器的100%;除非设定一个宽度。,...

[CSS]display:inline-block

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素...

css中display:inline-block

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素...

CSS中多列块的实现小结 display : inline-block 内联块

最近在折腾HTML5和CSS3    -->   示例页面 在做网页菜单的时候,最上面需要加一行工具栏,并排放的,那我想弄四个等宽的box,然后并排放,这样以后想扩展也很好扩展。 刚开...
  • misol
  • misol
  • 2011年11月03日 19:40
  • 2681

css中display:inline-block

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV CSS display (block none inline)属性的用法教程
举报原因:
原因补充:

(最多只允许输入30个字)