福州seo|福建seo >> 福州SEO优化 >> 实例简析display block,display inline block和display inline的区别

实例简析display block,display inline block和display inline的区别

作者:SEO技术 分类: 福州SEO优化 发布于:2015-7-30 10:28 ė620次浏览 60条评论

很多div+css的初学者都搞不清楚display block,display inline block和display inlilne三者之间的区别,去看了教程和说明感觉还是迷迷糊糊的,今天东莞seo用实例简析一下三者之间的不同。

今天我们的实例用的是京东首页的一小部分代码:

 <li>
                    <a href="#">                                                     
                        <div class="chuchuang_list_a">
                            <h6>天天低价</h6>
                            <span>欧宝利电视</span>
                            <h5>1099元秒杀</h5>
                        </div>
                        <img src="img/xin002.jpg" />
                    </a>
                </li>

CSS代码如下:

.chuchuang_list_a h5{
    display:inline-block;
    height:20px;
    font-size:13px;
    font-family:"microsoft yahei";
    color:#FFF;
    background:#e4393c;
}
.chuchuang_list_a span{
    display:block;
}

当前代码效果图如下(中间红色框架内)

jingdong.jpg

 这里当我们把h5中css的代码由display:inline-block换成display:inline,效果图如下(中间红色框架内)

QQ截图20140822103331.jpg

display:inline在w3c中的解释是: 此元素会被显示为内联元素,元素前后没有换行符。也就是说当它遇到行内元素的时候,它们会成为显示在同一行。代码中“欧宝利电视”是用的span标签,而span标签是行内元素,所以它们就显示到一块了。具体解决办法我们可以把display inline换成display inline-block. 另一个解决方法是把上面的行内元素换成块级元素,即可以将上面的span标签加个css样式:display block,让span成为块级元素,块级元素前后是要换行了,所以后面的红色就自动跳到另一行了。

至于display inline-block和display block的区别,我们直接用上图来表示(注意:红色背景处为代码显示效果处):

QQ截图20140822142333.jpg

本文出自 福州seo|福建seo,转载时请注明出处及相应链接。

分享本文至:

俗话说:SEO大神都喜欢发表自己的观点!那么你呢?

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部