display:inline 和inline-block和block有什么区别?

发布网友发布时间：2022-04-06 11:54

共2个回答

热心网友时间：2022-04-06 13:24

display:inline这个是将元素转化为内联元素,内联元素的前面和后面都不会有换行符,你不可以给内联元素定宽和高,也就是说你如果同时给一个元素写
{
display:inline;

width:值;

height:值;

}

那么width和height属性就会失效;
display:inline-block这个表示元素对内具有块级元素的宽和高的属性,即你可以对它设定宽和高,对外却具有内联元素的无换行符特性,这个属性IE8以上才支持,对于IE6和IE7不支持这个值,但是只要他们的元素触发了haslayout属性,他们的内联元素便具有inline-block的特性了,如果haslayout属性不知道的可以百度一下;
display:block这个是将元素转化为块级元素,有宽和高的属性,元素前后都有一个换行符,这个应该不用多讲了吧.

热心网友时间：2022-04-06 14:42

简单讲就是display:inline
转化成
内联元素
，不换行；display:block转换成块元素，换行；display:inline-block内联块元素，既不换行又可以使用块元素所拥有的属性，类似于块元素加了浮动效果，但低版本浏览器对这个不支持。