来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] Inline-block是元素display属性的一个值。这个名字的由来是因为，可以简单的解释为inline+block；display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。块...
|
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。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
