浅析inline-block--使用inline-block建立布局

　　inline-block前端程序猿们确定不陌生，它是display属性的一个取值。

　　之因此称之为inline-block。是由于它兼具行内元素(inline-element)和块级元素(block-element)的特征。

1. 块级元素（block elements）,来源于CSS盒子模型。块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。
2. 行内元素（inline elements）排列方式是水平排列。
3. 行内块元素（inline-block elements）在内部他的表现相似block元素，好比他拥有block元素的width height,便可以设定本身的高宽值，亦能够设定本身的padding,border与margin，而外部的排列方式有相似行内元素，即水平排列，而不是像块级元素同样从上到下排列。

　　

　　Replaced element 置换元素

　　说到这，有必要提的就是置换元素。何为置换元素，在html中，有类特殊的元素如:

　　<img>|<input>|<button>|<select>|<textarea>|<label>

　　他们被称为可置换元素（Replaced element）。他们区别通常inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们能够设置width/height属性。他们的性质同设置了display:inline-block的元素一致。上述六个标签在现代浏览器中即为天生的inline-block元素。

 

　　包裹性

　　包裹性的另外一种说法就是让元素inline-block化。意思是默认状况下一个div的宽度是以100%显示的，而一旦给这个div添加了postion:absolute属性，则100%的默认宽度会变成自适应的内部元素宽度。而诸如：

　　overflow | position:absolute | float:left/right 等均可以让元素inline-block化产生包裹性。

　　而包裹性的做用不少，其中一个是可使用其来清除元素的浮动。

 

　　inline-block的做用

　　 css布局建立网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,均可以看到浮动的影子。只是浮动常常会产生一些问题，那么问题来了？浮动是惟一的解决方案吗?

　　浮动一般表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，好比对一排图片使用浮动后对齐出现问题。So，inline-block是咱们的另外一种选择。使用这种属性能够模拟部分浮动的特征，而不须要处理一些浮动带来的问题。

　　这里极力推荐一篇张鑫旭的文章：拜拜了浮动布局-基于display:inline-block的列表布局。文章讲解的很是透彻，也将使用inline-block须要解决的兼容问题给出了十分详尽可靠的解决方案。

　　

　　inline-block和float的区别

　　虽然设置浮动跟设置inline-block有些特征相似，但二者的区别仍是很是明显的:

1. 文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。所以设置inline-block不须要清除浮动。固然，周围元素不会环绕这个元素，你也不可能经过清除inline-block就让一个元素跑到下面去。
2. 水平位置（Horizontal position）：很明显你不能经过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。可是父元素内元素若是设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这仍是由于浮动元素脱离文档流的关系）。
3. 垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你能够经过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要缘由。
4. 空白（Whitespace）：inline-block包含html空白节点。若是你的html中一系列元素每一个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴
5. IE6和IE7：Ie67对此属性部分支持。若是你要兼容这些浏览器，必须解决这个问题。可参照去除inline-block元素间间距的N种方法
   。