display的值和作用

display属性在CSS中扮演着重要角色,影响元素的布局方式。display:none使得元素不显示且不占据空间,而visibility:hidden则保留元素空间。内联元素如display:inline,不能设置宽高,影响高度由内部元素决定。块级元素display:block独占一行,可设置宽高。display:inline-block结合了两者特性,允许内联元素设置宽高。了解这些特性有助于优化页面布局。
摘要由CSDN通过智能技术生成

3.display的值和作用

display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

其中常用的的有none、inline、block、inline-block。分别的意思是:
1、none:元素不会显示,而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden, 是保留元素的空间的。
2、inline:display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为 inline, 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。
3、block:将元素将显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了。元素独占一行。
4、inline-block:行内块元素。这个属性值融合了inline 和 block 的特性,即是它既是内联元素,又可以设置width和height。

内联元素和块级元素的一些特点:
内联元素:
和其他元素都在一行上;
元素的高度、宽度及顶部和底部边距不可设置;
元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值