block,inline,inline-block的区别

本文详细介绍了HTML中块级元素(block)与行内元素(inline)的区别及特性,包括它们的显示行为、可设置的样式属性以及如何在不同浏览器版本中实现inline-block效果。

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

block: 英语翻译过来是“”意思,就跟小时候玩过的积木方块一样,一块一块往上搭。

inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素;

blockinline都是比较通俗的说法,block应该是“block-level elments”(块级元素),inline应该是“inline elements”(行内元素)

细节对比:

display:block的元素;

  1、在网页中会单独占一行,默认情况下他的宽度是填满父级宽度,即使他的宽度比浏览器窗口小很多也不会让后面的元素挤上来跟他同占一行(比较小气);

  2、可以设置width和height;

  3、还可以设置padding和margin;

display:inline;

  1、这样样式的元素就不一样啦,他比较大方,他可以和多个inline元素同占一行,直到他们的宽度总和超过了浏览器窗口的宽度才会将多出来的元素往下挤(因为实在太挤了);

  2、不能用width和height,因为这两个个属性在inline身上无效;

  3、padding-left、padding-left、margin-left、margin-right有效,其他方向上(上下)的padding和margin属性无效;

display:inline-block;

  1、简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。但width、height属性对他们仍有效;

 

注意:IE(低版本IE,IE8及以上支持)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别 的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。

那么如何让IE低版本支持inline-block呢?

方法1:先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个css声明中才有效果,这是ie的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下:

div{ display:inline-block;}
div{ display:inline;}

方法2:直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

div{ display:inline-block;
     zoom:1;
}

 

 

常见的块级元素:div、p、form、h1-h6、pre、ol、ul、dl等等;

常见的内联元素:span、a、img、input、textarea、br、em、label、strong、select等等

 

转载于:https://www.cnblogs.com/hongrunhui/p/4324532.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值