`
天梯梦
  • 浏览: 13612411 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

详解CSS display:inline-block的应用

 
阅读更多

本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。

 

基础知识

display:inline- block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了 inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥有了block元素可以设置width和 height的特性,又保持了inline元素不换行的特性。

 

举例说明:以前我们做横向菜单列表的时候,我们可以通过li和float:left两者来实现,现在可以通过li和display:inline-block。

 

HTML代码:

<ul>
    <li>首页</li>
    <li>关于</li>
    <li>热点</li>
    <li>联系我们</li>
</ul>

 

CSS代码

ul, li { padding: 0; margin: 0; list-style-type: none; }
li { display: inline-block; border: 1px solid #000; }

 

效果图

详解CSS display:inline-block的应用
详解CSS display:inline-block的应用
inline-block基本效果

可以看到li元素可以横向排列,并且可以设置width属性,大家可以复制代码自己查看效果或查看Demo

 

inline-block的问题

观察上面的例子,细心的同学肯定会发现,每个li之间有一个小空隙,而我们的代码中并没有设置margin等相关属性,这是为什么呢?

 

默认的inline元素

首先,我们观察一下默认的inline元素的表现:

 

HTML代码

<a>首页</a>
<a>热点</a>

 

CSS代码

a { margin: 0; padding: 0; border: 1px solid #000; }

 

效果图

详解CSS display:inline-block的应用
详解CSS display:inline-block的应用
inline默认情况

默认情况下,inline元素之间就有空隙出现,所以结合了inline和block属性的inline-block属性自然也有这个特点。
那这些空隙是什么呢,它们是空白符!

 

消除空白符

在浏览器中,空白符是不会被浏览器忽略的,多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格,换行都会产生空白符。所以自然而然的两个元素之间会有空白符,如果将上述例子中的a标签写成一行,空白符消失,菜单之间也就紧凑起来了。

 

空白符虽然是浏览器正常的表现行为,但是通常情况下,设计师同学的设计稿不会出现这些空隙,我们在还原设计稿的时候,怎么去除掉这些空隙呢。


要去除空白符产生的间隙,首先要理解空白符归根结底是个字符,通过设置font-size属性可以控制产生的间隙的大小。


首先我们将font-size设置成50px试试,修改CSS代码如下:

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px}
li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

 

我们修改ul的font-size为50px,而li的font-size为12px保持原来的字体大小,效果如下:

详解CSS display:inline-block的应用
详解CSS display:inline-block的应用
font-size:50px的空隙

可以看到菜单之间的空隙变大了。
接着我们设置font-site属性为0px,代码如下

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px}
li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

 

效果如下:

详解CSS display:inline-block的应用
详解CSS display:inline-block的应用
font-size:0的空隙

可以看到菜单之间的空隙没有了,大家可以自行查看Demo

 

兼容性问题

在IE8+,FF和Chrome的浏览器,inline-block可以完美的兼容,考虑到IE6和IE7等低版本浏览器的占用率,虽然有办法可以兼容,但本文不再赘述,大家有兴趣的可以查找相关资料。

 

inline-block的应用

inline- block的应用什么场景有哪些呢?我们大家考虑一个技术的应用场景时,首先一定要思考的是技术的特性和需求是否符合。 inline-block的特点是结合inline和block两种属性的特性,可以设置width和height,并且元素保持行内排列的特性,基于这 一点,所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block的应用场景。下面举例说明:

 

网页头部菜单

网页头部的菜单就是典型的横向排列并且需要设置大小的应用,在inline-block之前,实现菜单基本都是用float属性来实现,float属性会造成高度塌陷,需要清除浮动等问题,使用inline-block实现就不需要在意这样的问题。代码如下:

HTML代码

<div class="header">
    <ul>
        <li>
            <a href="javascript:;" target="_blank">服装城</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">美妆馆</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">超市</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">全球购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">闪购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">团购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">拍卖</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">金融</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">智能</a>
        </li>
    </ul>
</div>

 

CSS代码:

a, ul, li { padding: 0; margin: 0; list-style-type: none; }
a { text-decoration: none; color: #333; } 
.header ul { font-size: 0; text-align: center; }
.header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

 

效果图

详解CSS display:inline-block的应用
详解CSS display:inline-block的应用
京东首页导航菜单

这是模仿京东首页头部导航菜单的实现,使用inline-block可以很简单的实现横向菜单列表

 

内联块元素

除了菜单之外,一切需要行内排列并且可设置大小的需求就可以用inline-block来实现。
例如使用a标签做按钮时,需要设置按钮的大小,我们就可以使用inline-block来实现。

HTML代码

<div>
    点击右边的按钮直接购买
    <a href="javascript:;" class="button">
        购买
    </a>
</div>

 

CSS代码

 .button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }

 

效果图

详解CSS display:inline-block的应用
详解CSS display:inline-block的应用
a标签菜单

 

布局

inline-block也可以用于常见的布局,使用它就不需要去注意float属性布局带来的问题。
举例说明,创建一个常见的3列布局。

HTML代码

<div class="wrap">
    <div class="header">
        网页头部
    </div>
    <div class="content">
        <div class="left">
            左侧
        </div>
        <div class="center">
            中间
        </div>
        <div class="right">
            右侧
        </div>
    </div>
    <div class="footer">
        网页底部
    </div>
</div>

 

CSS代码

body, div { margin: 0; padding: 0; }
.header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }
.content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; }
    .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; }
    .content .left, .content .right { width: 200px; }
    .content .center { width: 600px; background: #00ffff; }

 

效果图

详解CSS display:inline-block的应用
详解CSS display:inline-block的应用
inline-block的三列布局

这个例子使用了inline-block做出了常见的网页布局。

关于inline-block的应用,只要是从左到右,从上到下,并且需要设置大小的列表都可以用它来实现,而这种需求是非常常见的,相比于float,我更推荐inline-block。inline-block的应用应该还有很多,大家可以多多挖掘出来。

 

总结

相比于使用float所带来的问题,使用inline-block所需要注意的点主要是空白符带来的问题,这一点也可以很方便的解决。
使用inline-block可以很方便的进行列表布局,更加符合我们的思维习惯,相信使用它的同学们也会越来越多,欢迎大家讨论。

 

原文地址:http://luopq.com/2015/11/01/display-inline-block/

转自:详解CSS display:inline-block的应用

 

 

 

 

 

分享到:
评论

相关推荐

    深入解析CSS的display:inline-block属性的使用

    但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。...

    css之display属性之inline-block布局实现详解

    CSS display 属性 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、...

    详解css中inline-block的最小宽度值

    前言 最近晚上会抽出一点时间看《css世界》这本书,这本书讲的很有趣,让我知道css并非几个属性样式这么简单。昨天看到width在行内块元素中,如果设置其宽度为0,该元素标签里面... display: inline-block; width: 0;

    详解css display:box 新属性

     在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;。 二、可在其子代设置如下属性  前提:使用如下属性,必须在父代设置display:box;  1.box-flex:number;  1)占父级元素宽度的...

    详解css中的display属性

    首先,所有主流浏览器都支持 display 属性。...那么,display:inline、display:block和display:inline-block有什么区别呢? 复制代码代码如下:&lt;style&gt;.inline{display:inline; width:100px; height:100px;

    使用CSS的table-cell属性实现左图右文的排版方法详解

    对要素进行横向排列的时候,一般都会使用float, display:inline-block等方法。我们使用table-cell也可以简单的实现,利用table-cell来制作横向排列的好处我觉得有三点(呵呵呵,有些牵强) 1.float以及 clear:both都...

    CSS: list-style 和 inline使用方法详解

    复制代码代码如下: display:inline; list-style:none outside none; white-space:nowrap 首先看下 list-style 的用法: 我以前只用到 list-style:none; 这种方式,原以为也只这种方式呢,这个方式只

    CSS中flex和inline-flex的区别详解

    inline-flex 和 inline-block 一样,对内部元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块。

    js图片无缝滚动插件使用详解

    本文实例为大家分享了js图片无缝滚动插件的具体代码,供大家参考,具体内容如下 css ul { ... display: inline-block; vertical-align: middle } .slide-img-ul&gt;li&gt;img { width: 100%; height: 100

    详解JavaScript添加给定的标签选项

    先看看效果图: 代码实现: ... &lt;h3&gt;haveTags &lt;div id=havetags&gt;&lt;/div&gt; &lt;h3&gt;addTags ... display: inline-block; padding: 0 0 0 10px; margin: 2px 5px; border: 1px solid #000; } #havetags span::afte

    CSS3盒子模型详解

    本章将介绍CSS3中各种盒的知识点;主要包含以下内容: CSS3中各种各样盒的类型概念...css中我们使用display来定义盒的类型,总体上分为block与inline类型。 css2.1追加了一个盒类型:inline-block,他属于block类型之一

    详解vue添加删除元素的方法

    相关版实例代码如下: &lt;!...&lt;... &lt;head&gt;...meta charset="UTF-8"&gt;...style type="text/css"&gt;... display: inline-block; width: 5rem; text-align: right; } &lt;/style&gt; &lt;/head&gt; &lt;bo

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    CSS实现垂直居中的七个方法实例代码详解

    ,就可以轻松解决掉水平居中的问题,但一直以来最麻烦对齐问题,都是“垂直居中”这个讨人厌的设定,以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法 设定行高(line-height) 添加伪元素 calc...

    css float浮动属性的深入研究及详解拓展(一)

    个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是“包裹及破坏” 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮动其实是个魔鬼、混球 一、...

Global site tag (gtag.js) - Google Analytics