java中display1,CSS Display(显示)

本文详细解读CSS display属性的三种常见值:块级元素、内联元素及不显示。了解如何改变元素类型并影响布局,包括块级元素如`<div>`和内联元素如`<a>`的应用,以及`display:none`的隐藏效果及其区别于实际空间占用。
摘要由CSDN通过智能技术生成

CSS Display(显示)

display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。

CSS显示属性

CSS规范定义了所有元素的默认显示值,例如

元素呈现为块,而 元素以嵌入式显示。

更改默认显示值

覆盖元素的默认显示值是display属性的一个重要含义。例如,将一个内联级元素更改为一个块级元素,或者将一个块级元素更改为一个内联级元素。

注意: CSS display属性是所有CSS中最强大和有用的属性之一。这对于创建外观不同但仍遵循Web标准的网页非常有用。

以下部分描述了最常用的CSS显示值。

显示块(Block)

display属性的block值强制元素的行为类似于块级元素,例如

元素。以下示例中的样式规则将和 元素显示为块级元素:

示例span {

display: block;

}

a {

display: block;

}测试看看‹/›

注意:更改元素的显示类型仅会更改元素的显示行为,而不是元素的类型。例如,不允许将内联元素设置为display: block;,使其内部嵌套有块元素。

显示内联(inline)

display属性的inline值使元素的行为就像是inline-level元素一样,例如或元素。以下示例中的样式规则将

元素显示为内联级元素:

示例p {

display: inline;

}

ul li {

display: inline;

}测试看看‹/›

显示内联块(inline-block)

display属性的inline-block值使元素生成一个方框框,该方框框将与周围的内容一起流动,即与相邻内容在同一行中。以下样式规则将

and 元素显示为内联块:

示例div {

display: inline-block;

}

span {

display: inline-block;

}测试看看‹/›

不显示(none)

display属性值为none时,使元素根本不生成任何框,并且在页面上不显示。子元素也不会生成任何框,即使它们的显示属性设置为非。呈现的文档好像该元素在文档树中不存在。

示例h1 {

display: none;

}

p {

display: none;

}测试看看‹/›

注:display属性值为none的不会创建一个无形的盒子-它不产生任何框。也不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。请参阅“ 可见性与显示”部分中给出的实时演示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值