CSS中 行内元素 与块元素的区别?

本文详细介绍了CSS中的display属性,包括inline、block及inline-block三种值的特性与应用场景。inline元素不独占一行,无法直接设置宽高;block元素独占一行,可设置宽高;inline-block元素则结合了两者的优点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

W3CSHOOL中,display属性规定元素生成框的类型:

=inline时,行内元素:

1.不会独占一行,元素在同一水平线上布局;

2.不能设置宽高,相邻的行内元素会排列在同一行里,直到一行排不下才会换行,其宽度随元素的内容而变化。若要控制宽高,可以改变元素的布局级别(即设置display值);

3.行内元素的margin和padding属性可在水平方向产生边距效果,垂直方向无效;



=block时,块元素:

1.垂直方向布局 前后有换行符 独占一行;

2.可设置宽高,默认情况下,其宽度自动填满其父元素宽度;

3.块级元素可以设置margin和padding属性;


=inline-bolck时, 行内块元素(CSS2.1新增)

1.将对象呈现为inline对象,对象内容作为block对象呈现,之后的内联对象会排列在同一行内。使其既具有block高宽度特性,又有inline同行特性


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值