您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

十一选五怎么玩法规则:DIV CSS display (none block inline)属性

在一般的CSS布局制作时候,我们常?;嵊玫絛isplay对应值有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

一、内蒙古11选五开奖5号的 display使用     -   TOP

以下为内蒙古11选五开奖5号的运用dispaly,说明这里dispaly值任意

CSS代码:

.thinkcss{display:none}

Html对应运用:

<div class="thinkcss">我是测试内容</div>

根据以上可以自己内蒙古11选五开奖5号的下,看看使用结果

常用display
1、div{display:block} 有换行作用。
案例:图片做背景,隐藏图片上文字//www.phlmy.com/jiqiao/55.shtml

2、div{display:None } 隐藏对象及对象内容。
案例:CSS隐藏HTML内容 //www.phlmy.com/jiqiao/55.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代码:

.thinkcss{display:block} 

Html对应运用代码:

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

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

四、css display none隐藏内容     -   TOP

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

五、css display inline     -   TOP

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

Css代码

ul.thinkcss li{display:inline}

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

Html对应代码:

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

<ul class="thinkcss">
<li>我父级ul有thinkcss样式</li>
<li>我站成一排</li>
<li>我在thinkcss下li站成一排</li>
</ul>

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

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

相关标签: display block inline
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/291.shtml

日期:2010-05-29 10:54:29 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS
  • 图解:从中国新闻奖、长江韬奋奖看人民日报70年 2019-06-27
  • 江夏区宣传干部培训班圆满落幕 荆楚网携手江夏区委宣传部举办 2019-06-26
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 衡阳日报社副社长周卫国祝贺人民日报创刊70周年 2019-04-27
  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • 90年电子游戏厅赌博机 苹果北京pk10历史记录 黑龙江时时彩停售了 梭哈什么意思 北京快乐8开奖网站 内蒙古时时彩开奖号 河北20选5幸运走势 2019排列三走势图全图 福彩3d坐标连线 浙江6+1玩法 山西体彩网 秒速飞艇彩投注平台 九心论坛精准一尾中特 188篮球比分 极速快乐十分出售