CSS inline-block属性概述及其使用示例
发布时间:2013-09-06 10:08:17 作者:佚名
我要评论

Inline-block是元素display属性的一个值,inline-block元素跟元素设置浮动后的表现差别并不是很大,本文有个不错的示例可以让大家知道它的具体使用,喜欢的朋友可以了解下
Inline-block是元素display属性的一个值。这个名字的由来是因为,可以简单的解释为inline+block ;display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。块级元素(block elements)来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素(inline elements)排列方式是水平排列。行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的width height,padding,border与margin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列。因此inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后,同样会水平排列。虽然他们实现的原理不同,但内部表现为块级元素,水平排列这种需求,浮动跟inline-block都适合实现。
如何从两者之间进行选择取决于你的设计稿跟解决方法。如果你需要文字环绕容器,那浮动是不二选择。因为浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内;如果你需要居中对齐元素,inline-block是个好选择,很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。
使用inline-block:当你需要控制元素的垂直对齐跟水平排列时,使用inline-block。
使用浮动:当你需要让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空白问题时,使用浮动。
对于图片列表来说。若父元素中的图片等高,设置浮动就会工作正常。但一旦有一列图片比较高时,图片的排列就会出现问题。这是因为浮动后,图片脱离了文档流。而inline-block由于未脱离文档流,不会出现这个问题。如果你想再创建一列图片时,不会受到上一列图片inline:block的影响,因此也不需要清除浮动。而你在使用附送时则需要时刻注意清除浮动,当内容不断变化时这很容易产生bug。
对比如下:
上图,把一系列元素设置了浮动,因为盒子二号宽度的关系,可以发现盒子五号被挤进去了(这些元素都脱离了文档流),这是图片排列中很常见的问题。
上面的块级元素被设置了inline-block。由于他们没有脱离文档流,所以元素不会被某个过长的列挤上来。
如何从两者之间进行选择取决于你的设计稿跟解决方法。如果你需要文字环绕容器,那浮动是不二选择。因为浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内;如果你需要居中对齐元素,inline-block是个好选择,很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。
使用inline-block:当你需要控制元素的垂直对齐跟水平排列时,使用inline-block。
使用浮动:当你需要让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空白问题时,使用浮动。
对于图片列表来说。若父元素中的图片等高,设置浮动就会工作正常。但一旦有一列图片比较高时,图片的排列就会出现问题。这是因为浮动后,图片脱离了文档流。而inline-block由于未脱离文档流,不会出现这个问题。如果你想再创建一列图片时,不会受到上一列图片inline:block的影响,因此也不需要清除浮动。而你在使用附送时则需要时刻注意清除浮动,当内容不断变化时这很容易产生bug。
对比如下:

上图,把一系列元素设置了浮动,因为盒子二号宽度的关系,可以发现盒子五号被挤进去了(这些元素都脱离了文档流),这是图片排列中很常见的问题。

上面的块级元素被设置了inline-block。由于他们没有脱离文档流,所以元素不会被某个过长的列挤上来。
相关文章
- 这篇文章主要介绍了css几种解决inline-block间隙的方案(整理),具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-08-16
css解决display:inline-block;产生的缝隙(间隙)的方法
本篇文章主要介绍了css解决display:inline-block;产生的缝隙(间隙)的方法,具有一定的参考价值,有需要的可以了解一下。2016-12-14- 这篇文章主要介绍了兼容浏览器的inline-block,需要的朋友可以参考下2016-02-17
深入解析CSS的display:inline-block属性的使用
这篇文章主要介绍了CSS的display:inline-block属性的使用,其中对使用时产生的空隙问题的解决作了重点讲解,需要的朋友可以参考下2015-11-09- 这篇文章主要介绍了CSS中使用inline-block来进行居中的示例,使用的时候注意一下容器的宽度,需要的朋友可以参考下2015-07-15
CSS属性display:inline-block用法深入理解
本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象,但是对象的内容作2012-12-30inline-block空隙之css letter-spacing与字体大小/字体关系数据表
本文提供inline-block空隙--letter-spacing与字体大小/字体关系数据表,需要的朋友可以参考下2012-12-09使用font-size:0px 来制作跨浏览器的inline-block css属性
像下面图中的布局,如果排列的元素是登高的话,相信很多人都会使用浮动来布局,不过如果元素不等高的话,不添加多余的标签,浮动布局是很难实现下图中的效果。如果遇到这种2011-07-29display:inline | block |inline-block-CSS教程-网页制作-网页教学网
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽2008-10-17- 这篇文章主要介绍了详解CSS 去掉inline-block元素间隙的几种方法,这些间隙会导致一些布局上的问题,需要把间隙去掉。非常具有实用价值,需要的朋友可以参考下2018-11-13
最新评论