display的block、none、inline属性及解释

news/2024/7/4 3:07:48

常会用到display对应值有block、none、inline这三个值

参数:

block :块对象的默认值。用该值为对象之后添加新行。之前也添加一行。

none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline :内联对象的默认值。用该值将从对象中删除行。如果其前后都是inline的则在同一行

display:block:

特点:

1、总是在新行上开始

2、该对象随后的内容自动换行

3、高度,行高以及顶和底边距都可控制

4、如果宽度缺省,则默认为它容器的100%

作用:

1. 显示被隐藏的块级元素,一般是相对于diplay:none;使用的。

2. 定义非块级元素,使css定义的长宽生效,比较常用于a、span这两个标签。

display:none;

用于隐藏对象内容,被隐藏的对象也不会占用自身固有宽度高度空间。

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

display:inline;

功能:

常在li中使用,让li排成一排。

特点:

1、和其他元素都在一行上

2、高,行高及顶和底边距不可改变

3、宽度就是它的文字或图片的宽度,不可改变

附:常见的块级元素

* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

附:常见的非块级元素

* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

  

转载于:https://www.cnblogs.com/zhanai/p/6659082.html


http://lihuaxi.xjx100.cn/news/252700.html

相关文章

深圳杯---深圳市生活垃圾处理社会总成本分析

2017年3月18日,国务院向全国发布了《生活垃圾分类制度实施方案》,这标志着中国垃圾分类制度建设开始了一个全新阶段,垃圾分类已成为推进社会经济绿色发展、提升城市管理和服务水平、优化人居环境的重要举措。为了保证这一目标能够顺利实现&am…

未来诺贝尔奖得颁给AI?英伟达Hopper H100 性能更新/华为造车即将来袭 | 一周AI新鲜事...

本周,业界有哪些新鲜事?基础科学破解已知蛋白质结构后,DeepMind又向数学伸手了在追求稳定和可解释的高性能应用场景中,产品性能退化不能过快,需要应用逻辑回归、树模型等模型。在模型训练过程中,矩阵乘法和…

Debian 6.0 安装过程 及中文乱码

2019独角兽企业重金招聘Python工程师标准>>> Debian 6.0 安装过程 Debian 6.0 安装过程 转(一个别人自录的安装过程录相) http://v.youku.com/v_show/id_XMjUyMzY1OTIw.html 转(别人写的一个过程) http://hi.baidu.com/ljx_freebsd/blog/item/88d60c09da379da22edd…

React和Jquery比较

Jquery的工作方式: 假如你需要给一个按扭添加一个点击事件。 首先根据CSS规则找到对应的dom元素,挂上一个匿名事件处理函数,在事件处理函数中,选中那个需要被修改的DOM元素,读取他的文本值,加以修改&#x…

java内存溢出的情况解决方法

内存溢出虽然很棘手,但也有相应的解决办法,可以按照从易到难,一步步的解决。  第一步,就是修改JVM启动参数,直接增加内存。这一点看上去似乎很简单,但很容易被忽略。JVM默认可以使用的内存为64M&#xff…

区分 欧几里得距离 曼哈坦距离 明考斯基距离

欧几里德距离(Euclidean Distance),欧氏距离。一种通常采用的表示相似度的距离定义,是表示在m维空间中两个点之间的真实距离。 对于n维空间中的两个点之间的欧几里得距离d(i,j)表示为: d(i,j) (|xi1-xj1|2|xi2-xj2|2……|xip-xjp|2)1/2 当n2…

Scratch青少年编程能力等级测试模拟题

青少年编程竞赛交流群已成立(适合6至18周岁的青少年),公众号后台回复【Scratch】或【Python】,即可进入。如果加入了之前的社群不需要重复加入。 微信后台回复“资料下载”可获取以往学习的材料(视频、代码、文档&…

15年后再次对话Python之父:人类大脑才是软件开发效率的天花板

【CSDN 编者按】十五年前,《程序员》杂志曾专访过 Python 之父 Guido van Rossum,一起探讨了 Python 3.0 的较为明显的新特性,即增加了对中文( Unicode )的支持。十五年过去,Python 的版本号只前进了一个数字,但是 Pyt…