css学习笔记二之inline-block

一、inline-block是CSS2.1中新增的盒类型，在div中将display属性设定为"inline-block"，则div显示效果与设置display属性为"inline"是同样的效果。

inline-block具备inline属性的列属性，内部又具备block属性的块属性，可使用width,height,margin,padding,border等元素。

二、使用inline-block能够在某些状况下替代float浮动元素，PS：要作一个横向导航条

在inline-block出现以前，通常都是使用如下代码，来完成上述功能：

<div class="nav">
    <ul>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
    </ul>
</div>

li {
    float: left;
    list-style: none;
    width: 100px;
    padding: 10px 0;
}

而使用inline-block，则能够经过以下代码完成：

li {
	display: inline-block;
	width: 100px;
	padding: 10px 0;
	text-align: center;
}

　关于二者的区别，在于float脱离文档流，如果须要文字环绕，则应该选择float元素，若须要让nav居中，或垂直对齐，则须要用inline-block。

　而在使用inline-block时，如果给上述li元素加上边框，则会发现左右有空白出现，这时有何解决方法呢？如今让咱们来看看解决方法：

1.  删除html中的空白：不要让元素之间换行，这可能比较蛋疼，但也是一种方法，特别是你元素很少的时候。
2.  使用负边距：你能够用负边距来补齐空白。但你须要调整font-size，由于空白的宽度与这个属性有关系。我认为是0.25em，但我不肯定。若是有人知道能够留言告诉我。
3.  给父元素设置font-size:0：无论空白多大，因为空白跟font-size的关系，设置这个属性便可把空白的宽度设置为0.在实际使用的时候，你还须要给子元素从新设置font-size。