分类 : Web前端

在一般的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} 有换行作用。
案例:图片做背景,隐藏图片上文字

2、div{display:None } 隐藏对象及对象内容。
案例:CSS隐藏HTML内容

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隐藏讲解:

五、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. <ul class="divcss5">

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

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

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

  10. </ul>

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

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


分类: Web前端    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    电脑知识    CSS基础
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程


分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 电脑知识 CSS基础

随机阅读

Vue生命周期,我奶奶看了都懂了
函数COLUMN()怎么解释?
ASP.NET 创建表格的SQL语句提示XXX附近有语法错误
什么是HTML?
span与div用法有什么区别
oracle sql like多个条件函数
oracle数据库模糊查询匹配多个字符串
oracle字段like多个条件
Java:String和Date、Timestamp之间的转换
Spring Boot 教程 - MyBatis-Plus
如何用u盘重装系统?用U大侠U盘启动制作盘安装Win7系统教程
方正综艺简体下载大全,什么方正综艺简体字体下载
C#遍历指定文件夹中的所有文件
Mysql和Redis数据同步策略
java String类型与Date日期类型互相转换


最新

零基础学习C语言,怎么入门?
C语言使用什么软件?
c语言用什么软件编写(新手c语言基础知识入门)
Oracle如何实现like多个值的查询
Oracle如何实现like多个值的查询 - 数据库
oracle 多个like条件查询
Oracle中关键字like的使用总结
oracle 中模糊查询对like的代替insrt()函数
oracle数据库模糊查询匹配多个字符串
Oracle如何实现like多个值的查询 - Oracle - 服务器

推荐阅读

vscode----vue中HTML代码tab键自动补全
html如何实现鼠标悬停显示文字,鼠标移走文字消失。
c语言中break语句的作用
C#语言之“string格式的日期时间字符串转为DateTime类型”
undefined是什么意思啊
DIV CSS字体(font-family)实现字体样式设置
AirPods怎么删除配对过的设备 airpods可以和电脑连接的
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
risk-taking中文是什么意思
replace和replaceAll是JAVA中常用的交换字符的办法

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16