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
一、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代码:
- .divcss5{display:block}
Html对应运用代码:
- <span class="divcss5">我的后面文字会换行</span>我是被前面的divcss5对应CSS属性换行。
- <span>不会被换行,因为我没有被设置display:block</span>
对应结果截图:
说明这里使用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对应代码:
- <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样式。
以上是DIVCSS5为大家整理和展示的关于CSS display常用的属性对应display none、display inline、display block值的详细讲解与实例,希望对你有帮助。同时有什么问题或疑问请到DIVCSS5的CSS论坛发贴讨论、求助。
DIV CSS display (block none inline)属性的用法教程相关推荐
- php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
- html block属性,css display block属性的意思、作用和效果
css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...
- html样式错位,如何DIV+CSS网页错位_DIV+CSS_网页错位_CSS教程_课课家
随着web2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+css制作方法,这种组合的布局形式好处显而易见,这里就不多说.今天主要和大家分享一下常见DIV+CSS网页错位问题及解决方 ...
- div+css中设置了float属性后如何让外层的高度随着内层的高度大小自动调整
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...
- 如何使用Jquery更改css display none或block属性?
如何使用Jquery更改css display none或block属性? #1楼 (function($){$.fn.displayChange = function(fn){$this = $(t ...
- 关于DIV中display属性误区以及牵扯出来的两个问题
百度搜索关于 Jquery设置DIV display时看到一个这样的答案: <div id="div1">sdfsdfsdfsd</div> $(" ...
- html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
- DIV+CSS技术的研究
第一章 DIV+CSS技术的基础知识 第一节DIV+CSS的基本概念 DIV+CSS是网站标准(或称"WEB标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(ta ...
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
最新文章
- yolov3 推理所需要的时间_目标检测-番外五:YOLOv3-Plus
- IE8-开发人员工具使用(一)
- GetClientRect()和GetWindowRect()
- 视觉设计_视觉设计:
- Java应用程序中的消息传递主体
- 编译型语言和解释型语言区别,编译器,解释器的区别
- 别人家的公司!顺丰将向员工提供3亿贷款,无利息无抵押无担保
- php如何设计一个网站,如何设计一个优质的外贸网站?
- 小技巧 ----- Java算法题中的输入输出
- vue axios 接口封装
- obs多推流地址_什么都比不上动手能力,OBS 推流实践小记
- 易语言-数据类型及其长度
- 简单的嵌入式人脸识别系统
- Pycharm安装jieba库
- 雅虎助手是如何自杀式攻击360安全卫士的?雅虎助手,3721是什么恶心人的--(部份转贴)...
- hive 计算周几_HIVE 计算指定日期本周的第一天和最后一天
- java 视频录制软件有哪些_有哪些好用的视频录制工具?
- 一叶知秋:通过Incloud Rail感受浪潮超融合架构
- Pytest注册使用自定义mark标签
- 系统级程序设计第二次作业
热门文章
- 【Android 逆向】ART 脱壳 ( InMemoryDexClassLoader 脱壳 | 加固厂商在 ART 下使用的两种类加载器 | InMemoryDexClassLoader 源码 )
- 【Android 逆向】ARM CPU 架构体系 ( ARM 处理器工作模式 | ARM 架构模型 )
- 【Android 插件化】“ 插桩式 “ 插件化框架 ( 类加载器创建 | 资源加载 )
- 【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )
- 【词汇】ab-前缀、al-后缀、norm-词根
- 【Kotlin】Kotlin 抽象类与接口 ( 接口声明 | 接口实现 | 抽象类声明与实现 )
- 【Android NDK 开发】Android Studio 的 NDK 配置 ( 源码编译配置 | 构建脚本配置 | 打包配置 | CMake 配置 | ndkBuild 配置 )
- Java并发编程之线程池及示例
- 网络流24题-魔术球问题
- Asp.Net Core 缓存的使用(译)