本文详细描述了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; }

效果图

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; }

效果图

inline默认情况

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

消除空白符

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

空白符虽然是浏览器正常的表现行为,但是通常情况下,设计师同学的设计稿不会出现这些空隙,我们在还原设计稿的时候,怎么去除掉这些空隙呢。
要去除空白符产生的间隙,首先要理解空白符归根结底是个字符,通过设置font-size属性可以控制产生的间隙的大小。
首先我们将font-size设置成50px试试,修改CSS代码如下:

 ul, li { padding:; margin:; 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保持原来的字体大小,效果如下:

font-size:50px的空隙

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

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

效果如下:

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:; margin:; list-style-type: none; }
a { text-decoration: none; color: #333; }
.header ul { font-size:; text-align: center; }
.header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

效果图

京东首页导航菜单

这是模仿京东首页头部导航菜单的实现,使用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; }

效果图

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:; padding:; }
.header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }
.content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size:; }
.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; }

效果图

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的应用的更多相关文章

  1. 详解CSS display:inline-block的应用(转)

    详解CSS display:inline-block的应用   阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-b ...

  2. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  3. 详解CSS float属性(转)

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  4. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  5. 详解CSS盒模型(转)

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  6. html5的float属性超详解(display,position, float)(文本流)

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  7. 详解CSS的相对定位和绝对定位(讲得很详细)

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  8. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  9. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

随机推荐

  1. dede织梦栏目页和文章页中获取当前栏目名称方法

    一般情况下,在dede织梦系统中列表页.栏目页和文章页中获取当前所在栏目名称只需要代码:{dede:type}[field:typename]{/dede:type}即可,不需要定义ID,默认的就是当 ...

  2. 引导图滤波(Guided Image Filtering)原理以及OpenCV实现

    引导图是一种自适应权重滤波器,能够在平滑图像的同时起到保持边界的作用,具体公式推导请查阅原文献<Guided Image Filtering>.这里只说一下自适应权重原理.C++实现灰度图 ...

  3. block一点也不神秘————如何利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...

  4. 通读cheerio API ——NodeJs中的jquery

    通读cheerio API ——NodeJs中的jquery 所谓工欲善其事,必先利其器,所以通读了cheerio的API,顺便翻译了一遍,有些地方因为知道的比较少,不知道什么意思,保留了英文,希望各 ...

  5. [知了堂学习笔记]_eclipse引入svn插件,并将项目同步到svn

    1. eclipse中不存在SVN问题的解决 1.1发现Team->Share project 下没有svn. 1.2下载安装svn插件. 选择help->Eclipse Marketpl ...

  6. 程序员之殇 —— One program, One king (血月)

    Are we living in the time of the end? (程序员的时代是否已经终结了?) 最近,我时常问自己这个问题. 刚读完了一个美国博士的论文,UDT (UDP-based D ...

  7. HTTP常用状代码

    2XX 成功 204 Not Content 请求处理成功,但没有资源可以返回. 1 put请求:该资源已存在于服务器上 2 delete请求:该资源已从服务器上删除 200 OK 请求正常处理 20 ...

  8. Hibernate (四)

    1 懒加载 (感觉用处不是很大) 需要的时候加载,不需要的时候就不加载. 1.1 环境的搭建 hibernate.cfg.xml <?xml version='1.0' encoding='ut ...

  9. struts2.xml的配置问题

    1.<package namespace="/"></package> namespace决定访问action的路径: 如果省略,将代表任意路径: 2.&l ...

  10. SQL FOR XML PATH 和 Stuff 用法

    sql stuff 用法 1.作用 删除指定长度的字符,并在指定的起点处插入另一组字符. 2.语法 STUFF ( character_expression , start , length ,cha ...