Display 的正常使用就不做过多的介绍了

inline-block

看一个 某商城的例子



从上图可以看到,这是一个 banner 效果,banner 在网页中经常出现的
一个动画效果。我这里主要介绍如何去实现 banner 上的导航(1-6 6个数字)的控制
要让这 6 个数字展示在左边或者右边会很简单,但是要展示在中间呢?


<style type="text/css">
    .wrap{
        border:1px solid #d1d1d1;
        padding:10px;
        width:100%;
        line-height:20px;
        text-align: center;
        color: #fff;
    }
    .wrap .item{
        display:inline-block;
        width:20px;
        height:20px;
        background:#3e3e3e;
    }
    .wrap .item + .item{
        margin-left:10px;
    }
    .wrap .item.active{
        background:#b61b1f;
    }
</style>
<div class="wrap">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item active">3</span>
    <span class="item">4</span>
    <span class="item">5</span>
    <span class="item">6</span>
</div> 
1 2 3 4 5 6
这里巧妙的使用 display:inline-block; 属性的特征来实现了这么一个效果
一个元素设置它的 display:inline-block; 后这个元素就与内联元素极为相信
这个时候给父元素设置 text-align: center; 这个元素就会自动到父元素容器
中间,利用这两个特性,就可以实现这么一个效果