css学习笔记二之inline-block - halapro.liu-html教程-PHP中文网

css学习笔记二之inline-block - halapro.liu

php中文网

发布： 2016-05-21 08:54:48

原创

1548人浏览过

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

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

2、使用inline-block可以在某些情况下替代float浮动元素，PS：要做一个横向导航条

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

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>AngularJS<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>AngularJS<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>AngularJS<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>AngularJS<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>AngularJS<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>AngularJS<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">

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

登录后复制

而使用inline-block，则可以通过如下代码完成：

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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

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

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